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Prefácio 


A construção de jogos é uma estratégia poderosa tanto no ensino 
como na aprendizagem dos princípios envolvidos na programação 
de computadores. Trata-se de uma abordagem que desenvolve o 
raciocínio lógico e privilegia a criatividade a partir de desafios que 
o(a) programador(a) vai encontrar ao longo da tarefa de elaboração 
dos códigos envolvidos na mecânica dos jogos. 


Nesta obra, você encontrará uma abordagem divertida e ao mesmo 
tempo abrangente de aprendizagem dos princípios envolvidos na 
construção de jogos de computadores, com a utilização de uma 
linguagem modema e intuitiva. Você será envolvido em um processo 
de aprendizagem baseado em projetos reais e funcionais. 


Público-alvo e objetivos 


O texto foi elaborado para estudantes e professores de cursos 
técnicos e superiores na área de Computação/Informática, bem 
como do ensino médio e fundamental, interessados no uso da 
tecnologia como ferramenta para autoria em projetos 
interdisciplinares. 


O objetivo é proporcionar a estudante uma abordagem de ensino e 
aprendizagem dos conceitos envolvidos na disciplina de lógica de 
programação de forma lúdica e envolvente, abstraindo os 
tecnicismos inerentes à área de desenvolvimento de software, mas 
aprofundando os conceitos para fundamentação teórico-prática. 


Partes do livro 


A primeira parte do livro apresenta o ambiente gráfico para 
elaboração de projetos de animações e jogos com a ferramenta 
Scratch, já utilizando a última versão da linguagem, lançada 
recentemente, que é a versão 3. Novos recursos foram adicionados 
como extensão do ambiente de construção de projetos, os quais são 
explorados ao longo da obra. 


Ao final de cada capítulo são apresentados exercícios de revisão e 
fixação dos conteúdos e instruções exploradas no texto através de 
vários exemplos. O livro é recheado de ilustrações que demonstram 
cada funcionalidade da linguagem e do ambiente de produção de 
projetos em Scratch. 


A segunda parte da obra apresenta seis projetos de jogos 
completos, onde você poderá praticar os conceitos abordados, a 
partir da elaboração dos comportamentos dos elementos do jogo, 
são eles: 


Qual é o som? 


Uma brincadeira com os instrumentos musicais, onde o jogador é 
convidado a advinhar qual instrumento está sendo tocado no 
momento. O jogador interage com a aplicação acionando o botão de 
som, então será emitido o efeito sonoro simulando algum dos 
instrumentos apresentados na cena. 


Jogo dos Instrumentos 





Cata gotas 


O quarto de Jack está um caos, pois são muitas goteiras e já faz 
algum tempo que chove sem parar. Para manter o quarto de Jack 
seco o jogador deverá movimentar um pote para capturar as gotas. 
Cuidado com o tempo, que pode se esgotar a qualquer momento. 


Al q 1 





Paddle 


Este jogo é baseado no clássico Pong, um simulador de Ténis, onde 
o jogador controla uma barra e rebate a bola, evitando-se que ela 
atinja a barra vermelha na base da cena. 





Camélia maluca 


O jogo Camélia maluca é educativo, visando o desenvolvimento do 
raciocínio lógico-matemático, onde o jogador deverá resolver 
expressões aritméticas para eliminação de valores apresentados em 
um quadro na cena. 
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Pesca submersa 


O pescador, cansado de jogar suas linhas na tentativa de pescar 
algo, resolve mergulhar no rio para buscar seus peixes. Para isso, 
deve percorrer a área submersa de um lado para o outro para tentar 
capturar os peixes. Note que nem tudo pode ser pescado, pois 
algumas criaturas submersas são nocivas e causam danos ao 
pescador. 





Invasão dos insetos 


Nosso herói Grimm tem um grande desafio para evitar a invasão 
dos insetos devoradores de humanos. O personagem precisa voar 
até seu destino para derrotar o grande vilão, mas encontrará muitos 
obstáculos durante sua jomada os quais deverá combater. 





Todos os códigos apresentados ao longo do texto estão disponíveis 
em: 


https://scratch.mit.edu/studios/5449468/ 


Espero que a leitura seja tão divertida quanto foi o processo de 
escrita deste livro. 


O autor. 


Sobre o autor 


Carlos Emilio Padilla Severo é programador e professor na área de 
Informática, tem formação e experiência na utilização de tecnologias 
da Informação e Comunicação no ensino e aprendizagem, possui 
doutorado em Informática na Educação pela Universidade Federal 
do Rio Grande do Sul (UFRGS), com ênfase no desenvolvimento de 
tecnologia para apoio a mediação pedagógica em ambientes virtuais 
de aprendizagem, mestrado em Ciência da Computação, também 
pela Universidade Federal do Rio Grande do Sul (UFRGS), 
enfatizando a modelagem e implantação de Sistemas de 
Informação. Durante o mestrado realizou estágio sandwich no 
Laboratório de Investigação e Formação em Informática Avançada, 
na Universidade Nacional de La Plata (UNLP) — Argentina, 
licenciatura plena em Computação pela Universidade do Estado do 
Rio Grande do Sul (UERGS), versando acerca da prática educativa 
docente na Educação Profissional e Tecnológica (EPT) e 
bacharelado em Informática pela Universidade da Região da 
Campanha (URCAMP). 


Atualmente, é professor do quadro de docentes efetivos do Instituto 
Federal Sul-rio-grandense (IF Sul), campus Bagé, exercendo 
atividades de docência no curso superior de Tecnologia em Análise 
e Desenvolvimento de Sistemas e no curso Técnico em Informática. 
Também atua como professor formador na pós-graduação lato 
sensu e como professor permanente na pós-graduação strictu 
sensu, no curso de mestrado em Educação Profissional e 
Tecnológica (PROFEPT). 


CAPÍTULO 1 
Apresentação 


A organização didática e apresentação dos conteúdos desta obra 
foram pensadas e concebidas em tomo da elaboração de jogos de 
exemplo, os quais introduzem conceitos de programação e níveis de 
complexidade de forma incremental. Dessa forma, as ferramentas e 
recursos para a construção dos jogos são apresentados à medida 
que sugerem a necessidade. 


O acesso à tecnologia da informação e comunicação, assim como 
sua forte influência na forma como nos comunicamos e 
relacionamos na sociedade contemporânea, tem promovido 
reflexões acerca das abordagens de ensino e aprendizagem nos 
mais diversos níveis e modalidades da educação. Não há mais 
espaço para o modelo de ensino no qual o professor é o único 
detentor do conhecimento e as ideias são transmitidas em aulas 
meramente expositivas, onde o papel do estudante é ser o receptor 
passivo de conteúdos. 


Tal modelo é meramente instrucionista, cuja ênfase educativa está 
centrada nos conteúdos de aprendizagem distribuídos nas 
disciplinas que compõem a grade curricular de um curso, no qual a 
avaliação é realizada por um processo somativo e classificatório do 
estudante, desconsiderando aspectos subjetivos no 
desenvolvimento da aprendizagem. Obviamente, o conteúdo é 
importante, mas pode ser diluído em atividades que tenham um 
maior significado ao estudante, com um apelo avaliativo mais 
formativo que somatório. 


Uma altemativa aos modelos tradicionais de ensino, baseados na 
mera difusão unidirecional de conteúdos de aprendizagem, é a 
abordagem baseada em projetos. As abordagens de ensino e 
aprendizagem baseadas em projetos trazem a possibilidade de uma 
educação onde a interdisciplinaridade é favorecida e o aprendiz é 


chamado a assumir o processo de construção de sua 
aprendizagem, superando o modelo passivo. A estudante não é 
mais uma mera receptora de informações. Neste sentido, as 
tecnologias da informação e comunicação trazem uma ampla gama 
de possibilidades de inovação no processo educativo. 


Geralmente, o estudante é receptivo ao professor criativo, o qual 
apresenta novidades no desenvolvimento de sua prática educativa, 
a partir de ideias que flexibilizem e tragam algo novo na forma como 
as atividades são planejadas e executadas, adequando-se aos 
estilos de aprendizagem dos estudantes. 


A combinação de recursos tecnológicos com os momentos didáticos 
de interação traz novos desafios ao processo educativo, tanto no 
planejamento e desenvolvimento de atividades de ensino, como no 
processo de construção da aprendizagem. Talvez um grande 
desafio ao docente seja a equalização entre as potencialidades 
educativas proporcionadas pelos recursos tecnológicos com as 
estratégias pedagógicas que apresentem espaços para o 
desenvolvimento da aprendizagem do estudante a partir do trabalho 
colaborativo. 


Outro elemento desafiante é o incentivo ao protagonismo, visando a 
construção da aprendizagem alicerçada na autonomia do estudante, 
com o envolvimento constante na organização das suas atividades 
no processo educativo. 


Cabe destacar que a autoria representa uma estratégia importante 
na prática educativa docente, apoiada em tecnologia como recurso 
pedagógico, pois a construção do conhecimento ocorre pela 
interação dos sujeitos com o objeto de sua aprendizagem. A 
mediação docente assume um papel essencial, pois será o vetor 
para o despertar da criatividade do estudante, tomando-o um sujeito 
ativo e comprometido ao longo do processo educativo. 


O uso de ferramentas de autoria permite ao estudante experimentar 
a possibilidade de construção de objetos de aprendizagem digitais, 


envolvendo os conteúdos abordados nas mais diversas disciplinas 
de seu curso. 


Scratch foi idealizada com o objetivo de aguçar a criatividade das 
estudantes e tomar mais prazerosa a aprendizagem. Para isso, elas 
são desafiadas a pensar logicamente, estruturar roteiros e codificar 
a solução através dos princípios envolvidos na programação de 
computadores. 


A linguagem Scratch foi elaborada por Mitchel Resnick, professor e 
pesquisador do grupo Lifelong Kindergarte no Laboratório de 
produção de mídias do Instituto de Tecnologia de Massachusetts 
(MIT), em 2007. O ambiente de programação é baseado em seus 
antecessores: a linguagem LOGO e Squeak, as quais também 
foram desenvolvidas com fins educacionais. A ideia de Scratch é 
simplificar o processo de programação de computadores, abstraindo 
e atenuando a complexidade de aspectos inerentes ao processo de 
construção de software. Para isso, a linguagem é baseada em um 
modelo de blocos encaixáveis, os quais são usados para elaboração 
da lógica de um programa. Além disso, o ambiente utiliza elementos 
lúdicos como personagens, cenas, animações, efeitos sonoros, 
músicas e gráficos, permitindo a compreensão dos conceitos por 
meio da elaboração de narrativas, animações ou jogos. 


1.1 Princípios teóricos 


Esta obra foi pensada e idealizada, levando-se em consideração 
duas dimensões: 


e como um instrumento para auxílio pedagógico à pessoa 
docente na elaboração de conteúdo educacional que promova a 
autonomia e criatividade do estudante, ao longo do processo 
educativo; 


e como um referencial teórico e prático ao estudante para a 
compreensão e domínio dos conceitos envolvidos na área de 
lógica e programação de computadores. 


O conteúdo foi organizado a partir dos princípios teóricos do 
construcionismo de Seymour Papert, educador e pesquisador norte- 
americano que atuava no Instituto de Tecnologia de Massachusetts, 
o qual postulou que a aprendizagem é efetivamente desenvolvida a 
partir não somente da interação do aprendiz com o objeto do 
conhecimento, mas pelo envolvimento do estudante, exercendo o 
papel de autor do conhecimento. 


Para Papert, o aprendiz é o responsável pela construção de suas 
próprias estruturas cognitivas, mas, para que isso ocorra, deve-se 
proporcionar condições que potencializem o desenvolvimento de 
conhecimento. A ênfase do construcionismo é a concepção de 
meios de aprendizagem que exaltem os mecanismos de construção 
mental do estudante a partir de suas próprias concepções de 
mundo. Portanto, os conceitos são intemalizados com base em 
abstrações e metáforas que permeiam a cultura do indivíduo. 


O ambiente de Scratch é baseado no conceito de micromundo 
proposto por Papert. Para o autor, os micromundos encapsulam 
recursos que permitem ao estudante desenvolver aprendizagem a 
partir de uma abordagem exploratória, onde o aprendiz pode realizar 
novas descobertas ou realizar simulações do mundo real que o 
cerca. Os micromundos podem ser de diversas naturezas, 
constituídos de estruturas distintas e variadas ferramentas, bem 
como serem concebidos para aprendizagem de conceitos de várias 
áreas do conhecimento. No caso do Scratch, trata-se de um 
micromundo destinado a exploração dos conceitos e 
desenvolvimento de habilidades na área de programação de 
computadores. 


Outra característica de Scratch é a disponibilização de uma 
comunidade virtual de usuários, onde podemos encontrar diversos 
projetos desenvolvidos com a ferramenta e que são compartilhados 


para divulgação de trabalhos. A comunidade forma uma rede social 
para troca de experiências e aprendizado da linguagem. Além disso, 
as pessoas podem criar estúdios, os quais são espaços no 
ambiente virtual que agregam projetos por categorias: jogos, 
simuladores, objetos de aprendizagem etc. Não há limite para a 
criatividade, basta inspiração. A comunidade conta com um fórum 
de discussão, onde podemos sanar dúvidas e, também, colaborar 
com o desenvolvimento da aprendizagem dos demais participantes. 


O princípio educativo utilizado como alicerce para a construção do 
livro foi a utilização de jogos como ferramentas educacionais. Os 
jogos motivam os estudantes, fazendo com que desenvolvam bons 
hábitos, tais como: disciplina, organização, colaboração, raciocínio 
lógico e persistência na busca de soluções para tarefas. A 
elaboração de jogos é uma maneira divertida e prazerosa de 
aprendizagem. 


1.2 Organização da obra 


A obra inicia com uma apresentação acerca do conteúdo que será 
abordado, bem como a sua estruturação, passando por capítulos 
incrementais os quais descrevem o processo de construção de 
aplicações baseadas em narrativas, animações e jogos no ambiente 
da ferramenta Scratch. O conteúdo e princípios conceituais 
apresentados estão recheados de ilustrações, exemplos e 
exercícios de fixação, para que o leitor compreenda os aspectos 
relacionados a lógica de programação a partir de uma abordagem 
que estimula a curiosidade e criatividade. 


Os projetos de animações e jogos apresentados no livro serão 
disponibilizados aos leitores e leitoras no espaço do autor junto 
ao portal de projetos de Scratch, no seguinte endereço 
eletrônico: 


https://scratch.mit.edu/studios/5449468/ 





O capítulo sobre o ambiente de criação de projetos tem por 
objetivo apresentar o ambiente de programação de Scratch, 
explorando e descrevendo sua estrutura de organização. As 
ferramentas disponíveis no ambiente para construção de animações 
e jogos são apresentadas e seu uso é exemplificado. 


Em elaborando animações, você encontrará informações sobre 
como elaborar animações em Scratch. Portanto, serão explorados 
aspectos como ações de modificação do cenário, movimentação 
dos atores e como aplicar efeitos sonoros nos personagens. Você 
aprenderá como criar seus próprios personagens, usando-se para 
isso o editor gráfico de Scratch, ou a modificar personagens 
presentes na galeria. Também verá como realizar um registro, 
criando-se uma conta de usuário no portal de Scratch. 


Na sequência, enriquecendo as animações tem por objetivo a 
ampliação dos conhecimentos desenvolvidos sobre animação, 
introduzindo conceitos da Computação como tomada de decisões e 
repetição de instruções, bem como a combinação deles para 
construção de projetos em Scratch. Além disso, serão explorados os 
sensores disponíveis no ambiente. 


Já o capítulo trabalhando com dados aborda o conceito e 
aplicação de variáveis nos projetos de animações ou jogos em 
Scratch. Aqui você entenderá como trabalhar com valores que 
podem representar pontuação, fases etc. Além de variáveis, 
também será apresentado o conceito de listas, muito utilizado na 
construção de jogos, o qual permite a representação de um conjunto 
de valores a partir de uma estrutura de dados. Com o conhecimento 


acerca de variáveis e listas, você já poderá entender a aplicação de 
operações lógicas ou aritméticas sobre os dados manipulados nos 
seus projetos. Dessa forma, serão abordados os conceitos de 
conectores lógicos e como tratar caracteres em jogos de palavras. 


O capítulo controle de personagens apresenta como tratar 
eventos que ocorrem durante a execução do projeto, tais como 
eventos gerados pelo usuário a partir do teclado ou mouse na 
condução de personagens em jogos ou animações. Eventos que 
possam modificar o cenário e, também, permitir a troca de 
mensagens entre os atores. Também serão apresentados conceitos 
como criação de clones de atores presentes nos projetos e a 
elaboração de novas instruções, as quais são criadas pela própria 
pessoa programadora, cuja finalidade é atender requisitos que as 
instruções convencionais do ambiente da linguagem Scratch não 
suprem. 


Após a fundamentação em lógica de programação, explorada nos 
capítulos anteriores, você já terá condições de elaborar jogos com a 
ferramenta Scratch. Dessa forma, serão apresentados alguns 
projetos de jogos como forma de estimular a criatividade e, também, 
permitir a compreensão de como um jogo é estruturado para 
responder a interações via mouse ou teclado, detecção de colisões 
entre elementos do cenário, troca de cenários, efeitos sonoros e 
mais. 


Em Qual é o som? são apresentados os conceitos iniciais de 
interação do usuário com jogos, onde ações de respostas aos 
cliques em botões apresentados na interface gráfica são 
programadas. 


No jogo Cata Gotas são introduzidos alguns conceitos sobre 
controle do personagem por meio do teclado, bem como formas de 
acumulação e apresentação da pontuação do jogador. 


O jogo Paddle é uma releitura do clássico jogo Pong, um dos 
primeiros jogos eletrônicos. Nesse jogo é apresentada a forma de 


controle dos elementos dos jogos. 


Em Camélia Maluca é realizada uma brincadeira com números, 
simulando uma calculadora eletrônica que possui algumas 
limitações para a elaboração de cálculos aritméticos. 


O jogo Pesca Submersa já apresenta vários elementos, como o 
controle de pontuação, inimigos, formas de ataque e defesa, com 
uso de conceitos como direcionamento de personagens. 


O jogo final, Invasão dos Insetos, apresenta a saga de um aviador 
que para chegar ao seu destino deve enfrentar uma invasão de 
insetos mutantes, os quais tentam impedir o herói. Nesse jogo, são 
apresentados conceitos como controle de energia e o desafio final. 


O último capítulo do livro apresenta algumas extensões do ambiente 
de Scratch, as quais permitem a elaboração de projetos com 
manipulação de fala, tradução e construção de músicas. 


CAPÍTULO 2 
O ambiente de criação de projetos 


Neste capítulo, abordaremos aspectos relacionados ao ambiente de 
criação de projetos em Scratch. Veremos as características sobre 
cada elemento que constitui a interface gráfica e como você poderá 
interagir com a ferramenta para elaboração de suas criações. O 
ambiente de Scratch é acessado de forma online, a partir de algum 
navegador Web compatível, tais como: Mozilla Firefox, Google 
Chrome etc. Ao acessar o site https://scratch.mit.edu será 
apresentada a página de abertura, conforme ilustrada na figura a 
seguir. Os projetos são elaborados a partir da opção de menu 

criar , a qual está disponível na barra de navegação ao topo da 
página do site. 
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Figura 2.1: Site do projeto Scratch. 


Também podemos ter acesso direto á página do software de 
criacáo, a qual pode ser obtida a partir de: 
https://scratch.mit.edu/projects/editor. 


O software de criacáo traz um conjunto de ferramentas para 
elaboração de projetos de narrativas, animações ou jogos, que 
estão disponíveis de forma integrada ao ambiente. As ferramentas 
estão organizadas em compartimentos distribuídos pela área da 
página apresentada no navegador. A seguir, veremos uma descrição 
de cada compartimento. A figura a seguir apresenta uma visão geral 


da organização dos compartimentos de ferramentas do software de 
criação. 
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Figura 2.2: O ambiente de programacáo. 


O palco 


Esta é a área onde o Scratch apresenta o resultado da execução do 
projeto criado pelo usuário. Scratch utiliza uma metáfora relacionada 
a um espetáculo em um teatro, então o palco é o local da página 
onde tudo acontece. Nesse espaço serão realizadas as animações, 
apresentação de narrativas e jogos (veja a próxima imagem). 


Um programa em Scratch é constituído por um conjunto de scripts 
de código, os quais são formados por blocos de encaixe. A área 
mínima do palco possui 480 pixels de largura por 360 pixels de 
altura, mas pode ser estendida, ampliando-se o aspecto visual. 
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Figura 2.3: O palco. 
Propriedades do palco 


É um compartimento logo abaixo do palco, conforme podemos ver 
na próxima imagem, que apresenta ferramentas para edição do 
aspecto visual do cenário. Uma das propriedades é o plano de 
fundo, que pode ser uma imagem escolhida a partir de uma galeria, 
obtida a partir do carregamento de uma imagem, capturada a partir 
da câmera de vídeo do computador do usuário, ou elaborada a partir 
do editor gráfico embutido no ambiente de Scratch. 
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Figura 2.4: Propriedades do palco. 
Atores 


Este é o compartimento apresentado ao lado das propriedades do 
palco, ilustrado na figura adiante. Nele, podemos adicionar os atores 
(personagens) que compõem as cenas de nossos projetos. Eles 
atuarão em narrativas, animações ou jogos que criaremos no 
ambiente de desenvolvimento de projetos de Scratch. Assim como 
os cenários, atores podem ser adicionados ao palco a partir de uma 
galeria prévia, carregados a partir do computador do usuário, 
obtidos pela câmera de vídeo do computador, ou elaborados por 
intermédio do editor gráfico. 
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Figura 2.5: Compartimento de atores. 
Paleta de blocos 


Trata-se de um compartimento que agrupa os blocos de instruções 
dos programas criados com a ferramenta. Os blocos de instruções 
são organizados em categorias, de acordo com suas funções, 
portanto, temos categorias de movimento, aparência, som, eventos, 
controle, entre outras. 


A figura a seguir mostra a paleta de blocos, a qual é composta por 
três abas: código, fantasias e sons. A aba códigos é utilizada para 
elaboração dos programas; sons, para composição de efeitos 
sonoros e músicas; já a aba fantasias contém o conjunto de 
imagens de um determinado ator. 


== Código -l Fantasias 
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Figura 2.6: Paleta de blocos. 
Editor de script 


A área mais a direita é destinada à elaboração dos scripts de código 
que representam aspectos relacionados aos personagens e 
elementos presentes nos projetos criados pelo estudante, tais como: 
posicionamento, dimensões, características visuais e 
comportamentos. 


Figura 2.7: Editor de scripts. 
A mochila 


Na parte inferior da página é apresentado o compartimento da 
mochila. Este é um conceito interessante e muito útil, pois permite o 


compartilhamento de scripts de código, ou elementos gráficos, entre 
os diversos personagens de um projeto e de distintos projetos. Por 
exemplo, um código que realiza o efeito de tiro de um personagem 
pode ser copiado para a mochila, permitindonos reaproveitar o 
comportamento para outros personagens do jogo. 


Si (es 
Ator Ator 
Sprite 1 Ball-S 


Mochila 


Figura 2.8: A mochila. 
Blocos de instruções 


Os blocos de instruções são utilizados para construção dos códigos 
dos nossos programas, sendo que cada categoria de instrução é 
identificada por uma cor diferente. A estrutura de construção dos 
programas em Scratch é realizada através peças que se encaixam 
umas nas outras. 


Essa ideia é bem interessante, pois toma a construção da lógica de 
um programa uma tarefa por vezes intuitiva, visto que algumas 
peças só podem ser encaixadas em peças específicas, fato que 
ajuda a contomar falhas na elaboração de programas. 


2.1 Menu de opções 


Ao ingressar na página correspondente ao software de criação de 
projetos, a primeira tarefa é definir a opção de idioma da interface 
gráfica. Para isso, deve-se clicar no ícone que representa um globo, 
apresentado ao lado esquerdo da entrada de menu denominada 


Arquivo . 


Note que todo o código é elaborado no próprio navegador e a barra 
de navegação oferece algumas opções de menu para 
gerenciamento de um projeto, são elas: arquivo, Editar € Tutoriais. 
A seguir, apresentamos as funções de cada entrada do menu de 
opções. 


SCRATCH Br Arquivo Editar 0: Tutoriais 





Figura 2.9: Menu de opções. 
Arquivo 


Nesta entrada estão as opções para manipulação do arquivo de 
projeto. O número de opções apresentadas é variável de acordo 
com o seu estado de conexão com o site. Caso você seja 
cadastrado no site e tenha realizado sua autenticação, o número de 
opções desta entrada de menu é maior, as quais serão 
apresentadas mais adiante no texto. As opções apresentadas para 
os usuários não cadastrados são: Novo, Carregar a partir de seu 


computador , Descarregar para o seu computador € Reverter. 


Dessa forma, podemos salvar em nosso disco local um projeto 
elaborado de forma online e, posteriormente, carregá-lo novamente 
a partir do disco local. A opção Reverter serve para cancelarmos 
todas as alterações realizadas no projeto desde a sua abertura. E 
Novo Serve para criarmos um projeto em branco para edicáo. 


Editar 


Esta opção é utilizada para ações relacionadas à edição de um 
projeto. Entre as ações disponíveis, temos a possibilidade de voltar 
atrás em relação a uma atividade realizada, por exemplo, a exclusão 
de um elemento gráfico ou código. Outra ação disponível é a 
configuração da dimensão do palco, que pode ser apresentado em 
uma forma reduzida ou normal. Por fim, temos a ação turbo, a qual 


é utilizada para acelerar a velocidade de processamento do projeto. 
Isso pode ser útil quando estamos testando animações, otimizando 
a execução dos comportamentos de personagens para fins de teste 
das funcionalidades de nossos projetos. 


Tutoriais 


A entrada de menu Tutoriais apresenta informações de ajuda 
acerca das funcionalidades de Scratch e como utilizar algum recurso 
disponível nas ferramentas do ambiente. Os tutoriais apresentam, 
de forma detalhada, como podemos criar animações, pequenos 
jogos, elaborar músicas, gravar sons e adicionar efeitos em projetos 
criados com Scratch. 


Opções de menu para usuários cadastrados 


Agora, vejamos as opções de menu que estarão disponíveis 
somente para os usuários autenticados no site, portanto, se deseja 
verificar estas opções de menu realize seu cadastro previamente. 
Iniciamos pela opção de menu arquivo a qual acrescenta uma nova 
entrada denominada Ir para minhas coisas . No ambiente Scratch o 
termo “minhas coisas” está relacionado aos projetos criados. 


Portanto, quando essa opção de menu for clicada, você será 
redirecionado para página denominada minhas criações, a qual será 
apresentada em detalhes em uma seção posterior do texto. Além de 
uma nova opção no menu arquivo , também são apresentados dois 
novos botões de atalho na barra de navegação do ambiente. 


Compartilhar 


Como o próprio nome diz, esta opção serve para compartilharmos 
nossos projetos com outros usuários cadastrados no site. Isso é 
uma boa prática, pois permite criarmos uma rede de relações com 
outros usuários da ferramenta, além de proporcionar uma forma de 
aprendizagem, visto que podemos receber sugestões e críticas 
construtivas acerca dos nossos projetos. 


Ver a página do projeto 


Nesta opção, temos acesso à página de descrição do projeto, que 
também pode ser acessada a partir da página “minhas coisas” 
(confira a imagem a seguir). A página do projeto é organizada em 
seções, onde podemos realizar as definições, tais como: título, se 
ainda é um rascunho, as instruções, notas e créditos. 


A área de descrição do projeto é útil quando estamos elaborando 
um jogo, porque pode ser utilizada para a escrita de instruções 
sobre o funcionamento e regras. Tal área também pode servir como 
texto de referência sobre as narrativas e animações construídas. 
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Figura 2.10: A página do projeto. 


2.2 À organização do palco 


O palco é organizado a partir de um modelo representando o plano 
cartesiano. Portanto, quando um elemento gráfico for posicionado 
no palco, seja um personagem ou objeto qualquer, serão atribuídas 
as coordenadas: “X”, que representa o deslocamento horizontal, e 
“Y”, que representa o deslocamento vertical do elemento. O centro 


do palco é a origem dos eixos, conforme podemos observar através 
da imagem: 
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Figura 2.11: O palco e o sistema de coordenadas. 


Dessa forma, o ponto (X:0 e Y:0) está definido bem no centro do 
palco. Do centro para cima, teremos valores positivos para a 
coordenada “Y” e do centro para baixo, os valores de “Y” serão 
negativos. Já em relação à coordenada “X”, o deslocamento do 


centro para a direita toma seus valores positivos, assim como o 
deslocamento do centro para a esquerda toma seus valores 
negativos. 


Quando deslocamos o ponteiro do mouse sobre a área do palco, as 
coordenadas de posicionamento são apresentadas na área de 
rodapé do palco. Note que os valores são dinâmicos e são 
modificados constantemente à medida que movimentamos. 


No topo do palco temos um ícone à esquerda que é utilizado para 
que possamos maximizar o compartimento, fazendo com que o 
palco ocupe toda a área da página no navegador. Quando este 
ícone for clicado novamente, o compartimento é recolhido e 
apresentado na sua posição original. Para teste de um projeto, é 
interessante maximizar o compartimento do palco, pois fica melhor 
de visualizar o resultado da execução dos códigos, principalmente 
quando estamos elaborando um jogo. A Figura a seguir apresenta o 
palco maximizado na página. 





Figura 2.12: O palco maximizado. 


Ao lado do ícone que permite a maximização ou restauração do 
tamanho original do palco, temos uma caixa de texto para que 
possamos nomear o projeto. Isso é importante no momento em que 
formos salvar um determinado projeto que estamos elaborando. O 
nome do projeto aparecerá na galeria de projetos. 


Por fim, temos mais dois ícones, são eles: 


e bandeira: quando desejamos testar a execução de nosso 
projeto, devemos clicar neste ícone. A bandeira representa a 
ação start, que significa iniciar a execução. 


e círculo vermelho: usado para interrupção da execução de um 
projeto. Por sua vez, este botão representa a ação stop. 


2.3 Manipulação de elementos gráficos 


Os elementos gráficos que constituem um projeto construído em 
Scratch são os personagens, objetos e cenas. Tais elementos 
podem ser obtidos a partir de uma galeria prévia disponibilizada no 
ambiente. Portanto, veremos como manipular os personagens, 
inserindo-os no palco a partir de uma galeria, carregando novos 
atores a partir de nossos próprios computadores ou, até mesmo, 
criando novos elementos gráficos com a ferramenta de desenho, a 
figura a seguir apresenta os botões de acesso à galeria, ao editor 
gráfico, à galeria de imagens ou à câmera de vídeo do computador. 


Palco 
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Figura 2.13: Botões para manipulação de atores. 


A galeria de atores apresenta elementos gráficos que podemos 
utilizar nos nossos projetos. Para acesso à galeria, deve-se clicar no 
botão de atalho que abrirá a caixa de diálogo que apresenta a lista 
de atores disponíveis. Os atores são organizados em categorias, 
temas ou pelo tipo de imagem, vejamos: 


e categorias: para organizar de uma melhor forma os elementos 
gráficos da galeria, Scratch apresenta os objetos em categorias, 
tais como: animais, fantasias, letras, pessoas, coisas ou 
transportes; 


e tema: esta é outra forma de organizar os elementos gráficos 
que constituem uma cena. Os temas representam o conjunto de 
objetos com características em comum de uma determinada 
época, evento, comportamento, estilos etc.; 


e tipo: os objetos também são agrupados de acordo com o tipo 
de imagem. Portanto, os elementos gráficos podem ser 
imagens vetoriais ou do tipo bitmap. 


As imagens do tipo bitmap, por serem formadas por um conjunto de 
pixels, ao serem redimensionadas sofrem efeito de distorção. Já as 
imagens vetoriais usam a Matemática a seu favor para definição de 
seu modelo, através de um método denominado vetorização, então 
podem ser recalculadas à medida que são redimensionadas, 
mantendo a sua proporção e qualidade. 


Após a seleção de um ator, seja da galeria, computador do usuário, 
câmera de vídeo ou editor gráfico, ele será apresentado no 
compartimento de atores, então teremos acesso a suas 
propriedades, tais como: nome, direção, coordenadas em relação ao 
palco, estilo de rotação, se pode ou não ser arrastado durante a 
execução e se está visível ou oculto no palco. 


Para acesso às propriedades do ator, deve-se clicar no ícone de 
informações, presente no canto superior esquerdo do ator, conforme 
ilustra a figura adiante. Ao inserir um ator no palco, podemos 
reposicioná-lo clicando sobre ele e arrastando com o mouse. 
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Figura 2.14: Propriedades do ator. 


2.4 Atores e suas fantasias 


Alguns elementos gráficos possuem mais de uma aparência. Este 
aspecto é essencial quando desejamos criar personagens animados 
em nossos projetos, visto que a intercalação de imagens permite a 
simulação de movimentos dos atores que compõem uma cena. Com 
a ideia de fantasias, ou trajes, podemos ter várias imagens 
associadas a um personagem, as quais descrevem os estados 
relacionados ao andar, correr, pular, abaixar etc. Tais ações são 
possíveis pela sobreposição de imagens ao longo do tempo, dando 
a impressão de que o personagem está realizando algum tipo de 
movimento na cena. 


Para verificarmos as fantasias, ou trajes, disponíveis para um 
determinado personagem, basta selecioná-lo e clicar na aba 
Fantasias , presente ao lado da paleta de blocos de código, conforme 
ilustrado na figura a seguir. 
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Figura 2.15: As fantasias de um ator. 


A ilustração apresenta as imagens gráficas relacionadas ao ator 
Ben, que é um personagem que dança no palco. Note que há quatro 
imagens disponíveis para o ator, cada uma com uma pose 
específica para o personagem. 


Se altemarmos as imagens na cena, a cada fatia de tempo, 
determinada em milissegundos, poderemos simular movimentos 
relacionados à dança de Ben. 


Na sequência do livro, teremos um capítulo somente sobre a 
elaboração de animações, onde vamos explorar técnicas para 
simulação de movimentos de personagens. 


2.5 Ferramentas de edição de atores 


O ambiente de edição de projetos traz algumas ferramentas úteis 
para manipulação dos personagens das nossas animações. Elas 
permitem o redimensionamento das imagens que representam os 
personagens, duplicação de um determinado personagem e 
exclusão de algum elemento gráfico que não desejamos mais no 
cenário. Vejamos uma breve descrição de cada: 
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Figura 2.16: Ferramenta de edição de atores. 
Duplicar 


Ao selecionar esta ferramenta temos a possibilidade de criar uma 
cópia de um determinado elemento gráfico presente no palco. Para 
isso, basta clicar no ator que desejamos duplicar e posicionar o 
mouse na área do palco onde desejamos alocá-lo. Esta é uma 
ferramenta muito útil em projetos que apresentam várias cópias de 
um mesmo elemento gráfico, tanto para elementos estáticos que 
compõem o cenário, quanto dinâmicos, como personagens de 
animações ou jogos. 


Apagar 


Esta é a ferramenta com aparência de uma tesoura, cuja finalidade 
é remover um elemento gráfico do palco. Para usá-la, basta 
selecionar a ferramenta e clicar sobre o objeto que desejamos 
remover do nosso projeto. Pode ser diretamente no elemento 
presente no palco, ou no compartimento de atores do projeto. Dessa 
forma, o elemento não estará mais disponível em nosso projeto e, 
se precisarmos novamente do objeto gráfico, deveremos inseri-lo. 


Exportar 


A ferramenta Exportar permite que baixemos a imagem para nosso 
computador, portanto, devemos clicar sobre o objeto e selecionar a 
opção para exportação da imagem. O Scratch vai perguntar em qual 
pasta desejamos salvar o arquivo. 


Ajuda de bloco 


A ferramenta de ajuda de bloco apresenta dicas sobre utilização de 
um determinado bloco de instrução da linguagem Scratch. A sua 
utilização é simples, basta selecioná-la e clicar sobre o bloco de 
instruções desejado, presente na paleta de blocos. Uma ajuda sobre 
a utilização da instrução será apresentada em um compartimento na 
borda direita da página. 


2.6 A criação de seu próprio elemento gráfico 


Com o uso da ferramenta pintar, podemos desenhar nossos próprios 
personagens. Há um editor gráfico que permite o desenho de 
formas geométricas básicas, tais como círculos, quadrados e 
retângulos, além de trazer alguns recursos úteis, como borracha, 
pincel, pintura, digitação de textos, movimentação de elementos 
gráficos e edição de pontos da figura geométrica. A imagem a seguir 
mostra como podemos acessar o editor gráfico. 





Figura 2.17: Menu de acesso ao editor gráfico. 


Outro conjunto de funcionalidades permite selecionar, copiar, 
recortar, agrupar, desagrupar, trazer para primeiro plano, ou enviar 
para segundo plano os elementos gráficos que estamos editando. A 
próxima figura apresenta um elemento gráfico sendo criado pela 
ferramenta. Trata-se de uma árvore que vai compor o cenário de 
uma animação ou jogo. A árvore foi criada somente com as formas 
geométricas disponibilizadas pelo ambiente, ou seja, os círculos, 
quadrados e retângulos. 


Fantasia fantasia1 mn + 


Preencher C] Y  Contornar Y v 0 B B Ú b y 


+ 
se 
A T 
/ O 
E 





(ada) Converter para Bitmap 


Figura 2.18: Editor gráfico. 





2.7 Crie seu usuário no site 


Ao acessar o site https://scratch.mit.edu/ você pode realizar um 
cadastro. O cadastramento de usuário traz algumas vantagens 
durante a construção de projetos, pois assim podemos manter 
nossas elaborações na nuvem, dispensando a necessidade de 
exportar para nosso computador toda vez que desejarmos salvar as 
alterações realizadas. 


Outra vantagem do cadastro é que podemos fazer parte da 
comunidade de Scratch, o que permite o compartilhamento de 
nossas criações com outros usuários, também podemos receber 
feedback acerca de nossas ideias, bem como reutilizar projetos de 
outras pessoas, o que é uma ótima forma de aprendizado. 


Para a realização do cadastro devemos clicar na opção aderir ao 
Scratch , presente no menu de navegação ao topo da página de 
entrada do site. Dessa forma, será apresentada uma caixa de 
diálogo, onde devemos preencher alguns dados solicitados, tais 
como: nome, senha, data de nascimento, sexo, país e e-mail de 
confirmação. Feito o cadastro, já podemos fazer o login de acesso 
ao site, clicando-se na opção Entrar. 


Criar Explorar Dicas Acerca Q Pesquisa Aderir ao Scratch Entrar 


Figura 2.19: Menu de navegação. 


Quando realizamos o login no site, já podemos ter acesso ao menu 
de opções, o qual apresenta: 


e uma opção para edição do perfil, onde podemos editar nossas 
informações pessoais, projetos que estamos desenvolvendo, 
projetos que compartilhamos com a comunidade, projetos que 
marcamos como favoritos e usuários que estamos seguindo; 


e o menu minhas criações apresenta todos os projetos criados, 
então podemos gerenciar os projetos já criados, ou aqueles que 
ainda estão em processo de criação. Neste menu também 
podemos criar um novo projeto ou excluir algum existente, além 
de visualizar seus projetos compartilhados e não 
compartilhados; 


e em configurações da conta podemos modificar dados como a 
senha, país de localização e e-mail utilizado para contato. 


Resumo do capítulo 


Iniciamos o capítulo com a apresentação do ambiente gráfico para 
construção de projetos em Scratch, portanto vimos que é possível a 
criação de narrativas, animações e jogos. Pudemos entender como 
o ambiente é organizado e quais são os compartimentos de 
ferramentas disponíveis. Exploramos o palco, que é o principal 
compartimento do ambiente, onde tudo acontece, verificamos que 
os elementos gráficos são dispostos em um sistema de 
coordenadas e conhecemos botões para a execução e interrupção 
de projetos. 


Também vimos como manipular os personagens, que em Scratch 
são chamados de atores, a partir do compartimento de edição das 
propriedades, que permite o gerenciamento dos elementos gráficos 
que compõem as cenas de nossos projetos. Podemos observar que 
o ambiente já traz uma galeria de atores e cenários predefinidos, os 
quais utilizamos em nossas aplicações. 


Outro aspecto importante abordado no capítulo foram as fantasias, 
que são as formas gráficas de um personagem. O conceito de 
fantasia permite que possamos realizar animações em nossos 
projetos. Por fim, abordamos como um usuário pode realizar um 
registro no site de Scratch, assim tendo acesso a mais recursos e 
podendo participar de uma comunidade de usuários. As 
comunidades permitem a troca de experiências e muito 
aprendizado. 


2.8 Exercícios 


2.1) O que é necessário para criarmos um novo projeto? 
2.2) Elabore um novo projeto denominado “Araras”. 


a) Insira uma arara vermelha e uma arara azul no projeto. 


b) Faça o espelhamento horizontal da arara azul, fazendo com que 
ela vire para direita. 


c) Mude a cor das asas da arara vermelha. 


d) Mude os nomes das araras, colocando: arara vermelha € 


arara azul. 

e) Troque as fantasias das araras. 

f) Execute o projeto e interrompa a execução. 

2.3) No projeto “Araras”, realize as seguintes operações: 
a) Salve o projeto no seu computador e feche o navegador. 


b) Abra novamente o navegador, vá até o site de Scratch e carregue 
o projeto de seu computador. 


2.4) Crie um novo projeto denominado “jordyn dance” e faça as 
seguintes operações: 


a) Adicione o personagem Jordyn na cena. 

b) Altere o tamanho de Jordyn para 70% de seu tamanho original. 
c) Gire Jordyn em 45 graus. 

d) Arraste a personagem para o canto superior direito da cena. 

e) Mude o cenário, colocando a imagem “Blue Sky” de fundo. 

f) Salve o projeto em seu computador. 


2.5) Elabore um novo projeto denominado “floresta” e realize as 
seguintes tarefas: 


a) Desenhe um arbusto e coloque-o na cena. 
b) Após, desenhe uma árvore. 


c) Realize cópias das árvores e espalhe-as pela cena. 


d) Salve o projeto em seu computador. 


2.6) Entre no site de Scratch e realize o seu registro, criando um 
novo usuário. 


a) Carregue seus projetos a partir do computador e salve no 
ambiente. 


b) Vá em “Minhas Coisas” e verifique se seus projetos estão lá. 


c) Edite as propriedades do projeto “Araras” em “Minhas Coisas”. 


Os códigos dos exercícios podem ser obtidos em: 


2.2 € 2.3 Araras: https://scratch.mit.edu/projects/252581106/ 


2.4 Jordyn dance: https://scratch.mit.edu/projects/441696261/ 





CAPÍTULO 3 
Elaboração de animações 


Uma forma criativa e estimulante de aprender os conceitos 
envolvidos na programação de computadores é através da criação 
de cenas animadas. As animações agregam vários princípios, tais 
como: posicionamento dos elementos gráficos na cena, 
deslocamento dos objetos por modificação das coordenadas no 
plano cartesiano, tomada de decisão quando determinados eventos 
ocorrem, repetição de comportamentos dos objetos, entre outros. 


O projeto das cenas e o comportamento dos objetos que as 
compõem colabora com o desenvolvimento do raciocínio lógico do 
estudante, visto que exige concentração e planejamento prévio, 
além de favorecer o desenvolvimento da criatividade a partir de 
propostas lúdicas, que tomam o aprendizado mais leve e 
desprendido de aspectos complexos inerentes da área de 
Computação. 


O ambiente de programação de Scratch é rico, intuitivo e 
estimulante, pois traz ferramentas que facilitam a construção de 
projetos e códigos de programa, possibilitando aos estudantes a 
concentração em aspectos mais relevantes ao longo do processo de 
elaboração dos algoritmos. Portanto, nesta seção, entenderemos 
como elaborar sequências de código, que é o primeiro modelo de 
algoritmo que vamos construir, ou seja, aqueles algoritmos cujas 
instruções são executadas, uma após a outra, em uma sequência 
lógica predefinida pelo programador ou programadora. Esse 
conceito será explanado a partir de uma animação denominada 
Araras, conforme ilustrada a seguir: 





Figura 3.1: Animação araras. 


Na cena, podemos observar duas araras em uma área verde, com 
algumas árvores ao fundo. Sobre o pano de fundo que compõe a 
cena, as araras realizam voos. O trajeto da arara vermelha inicia na 
margem esquerda da cena em direção à margem direita; já a arara 
azul faz o movimento contrário. Entretanto, quando ambas 
alcançarem a extremidade da cena, a inversão do movimento é 
realizada. 


Este comportamento será repetido por tempo indeterminado e será 
finalizado somente pela interrupção do programa pelo usuário. 
Apesar de simples, o exemplo ilustra vários conceitos envolvidos na 
construção de programas, os quais serão explanados ao longo da 
elaboração do projeto. 


3.1 A aparência do cenário 


Iniciamos pela elaboração da aparência do cenário, o qual é 
constituído de elementos gráficos presentes na galeria. Para 
modificação da aparência do fundo do cenário, podemos recorrer a 
planos de fundo predefinidos, clicando no botão de acesso à galeria 
e, após, selecionando a imagem desejada na caixa de diálogo 
apresentada. Veja a figura a seguir, que ilustra as ações envolvidas 
na escolha do cenário. 


Na sequência, devemos colocar três árvores, as quais também 
fazem parte da paisagem de fundo do cenário. As árvores também 
estão presentes na galeria de elementos gráficos, mas, para 
adicioná-las, devemos clicar no botão de inserção de um novo ator. 
As árvores, apesar de serem elementos estáticos, também são 
atores presentes na cena. 


Por fim, partimos para definição dos atores animados (araras). Para 
isso, acessamos novamente a galeria de elementos gráficos, 
acionando o botão para inserção de atores, da mesma forma que 
fizemos para inserir as árvores na cena, e selecionamos as araras 
presentes na categoria de animais. Posicione as araras, clicando 
sobre cada uma delas e arrastando pelo palco, solte-a o mais 
próximo da extremidade. Assim, a aparência do cenário de nossa 
animação está concluída, passamos agora para definição do 
comportamento das araras na cena. 







Ator Nome e x x 1 y y 


Mostrar O Ø Tamanho Direção 


Selecionar Cenário 


+ Voltar Selecionar Cenário 


q 


Arctic Baseball 1 Baseball 2 Basketball 1 Basketball 2 Beach Malibu Beach Rio 












Bedroom 2 Bedroom 3 Bench With... Blue Sky Boardwalk Canyon Castle 1 





E EE ha. cai MA 


Castle 2 Castle 3 Castle 4 Chalkboard Circles City With ... Concert 





Figura 3.3: Selecáo do cenário e galeria. 


3.2 Movimentacáo dos personagens 


A movimentacáo dos atores presentes na cena é que dará vida a 
nossa animacáo. Apesar de simples, alguns conceitos básicos de 
programação são necessários para que os personagens ganhem 
movimento. Dessa forma, veremos os primeiros códigos de 


programação presentes na paleta de blocos de instruções da 
ferramenta. O grupo que vamos explorar é o de movimentos. Note 
que, para definirmos a dinâmica de movimentos das araras, vamos 
utilizar o bloco mova, O qual permite deslocar o objeto alguns passos 
pela área da cena. Esse e outros blocos de construção que 
permitem a definição do comportamento de movimento dos 
personagens estão presentes na paleta, conforme podemos 
observar na lista a seguir. 


e move o personagem o número de passos indicado pelo valor 
numérico. Se o valor for positivo, o personagem será deslocado 
para direita, caso contrário, o movimento será para esquerda. 





e realiza a rotação do personagem em um ángulo de 15 graus no 
sentido horário. 





e realiza a rotação do personagem em um ángulo de 15 graus no 
sentido anti-horário. 


gire Bm 15 graus 





e desloca o elemento gráfico para uma posição aleatória, dentro 
das coordenadas do palco; ou a posição onde se encontra o 


ponteiro do mouse. 


vá para posição aleatória * 





desloca o personagem para as coordenadas definidas por X e 


Y. 
va para x: Y: 


realiza um efeito de deslizamento da imagem gráfica, pelo 
tempo em segundos informado, até uma posição aleatória, ou a 
posicáo onde se encontra o mouse. 








deslize por 1) segs. até posição aleatória + 


o efeito de deslizamento do elemento gráfico é realizado, pelo 
tempo determinado, até as coordenadas informadas para X e Y. 


deslize por a segs. atë x: 6] y: 


muda a direção do personagem, a partir do deslocamento das 
coordenadas de acordo com os graus informados. Se for 
positivo, aponta no sentido horário, caso contrário, aponta no 
sentido anti-horário. 





aponte para a direção 





e faz com que o objeto aponte para as coordenadas do mouse. 


aponte para ponteiro do mouse * 





e altera a posição do personagem, modificando-se o valor da 
coordenada X. O mesmo pode ser feito com a coordenada Y, 
usando-se o bloco adequado. 


mude x para O 


e adiciona um valor constante na coordenada Y, fazendo com que 
o personagem seja movido, para baixo se o valor for positivo, 
ou para cima se o valor for negativo. O mesmo ocorre para 
coordenada X, usando-se o bloco equivalente. 


adicione 10) a y 


e Caso o personagem, ao realizar o deslocamento, toque em uma 
borda do palco, faz com que a direção do deslocamento seja 
invertida. 








se tocar na borda, volte 





Sendo assim, escreveremos o nosso primeiro modelo de algoritmo, 
puramente sequencial, onde as instruções que constituem o 
programa são dispostas e executadas uma após a outra, do início 
ao fim do programa. Neste caso, temos que codificar o 
comportamento de cada arara presente na cena. Quando o projeto 
for executado, as araras se movimentarão pelo cenário, executando 
movimentos intercalados, ora uma arara bate as asas, ora a outra 
realiza a mesma ação, entretanto teremos a impressão de que os 
movimentos são realizados simultaneamente, dada a velocidade do 
processamento da cena. 


Para codificarmos os movimentos de voo de cada personagem, 
devemos clicar sobre cada arara e adicionar a sequência de blocos 
que constituem as instruções que permitem o deslocamento pela 
área do palco. Primeiramente, vejamos a sequência de instruções 
que determinam os movimentos da arara vermelha, observe a 
ilustração. 


quando for clicado 


mova 110, passos 


próxima fantasia 


espere 03) seg 


Figura 3.16: Blocos de instruções do voo da arara vermelha. 





A execução das instruções do programa inicia a partir da ocorrência 
de um determinado evento. Neste caso, é quando clicarmos na 
bandeira que dispara a execução do programa, portanto o primeiro 
bloco de instruções presente é: Quanto a bandeira for clicada . Esta é 
uma ação de interação do usuário com a interface gráfica do 
programa, mais adiante veremos outras ações de interação e, 
também, alguns eventos intemos, decorrentes da execução das 
instruções de um programa. 


O deslocamento da arara vermelha ocorre da extremidade esquerda 
para a direita do palco, lembrando que o palco é organizado a partir 
do plano cartesiano, composto por eixos que determinam o 
deslocamento horizontal ou vertical dos personagens. Neste caso, a 
arara vermelha realiza um movimento horizontal (sobre o eixo X) em 
direção à borda direita do palco, portanto devemos inserir um bloco 
de código que incremente o valor da coordenada “X” da arara 
vermelha. Para isso, usaremos o bloco: mova 18 passos . Note o valor 


positivo de incremento dos 10 passos a serem dados. A figura 


ilustra o efeito do bloco de instrução mova. 


Direção de deslocamento no eixo horizontal 
(incremento da coordenada X) 








Figura 3.17: Movimento da arara vermelha. 


Já a arara azul realiza o movimento inverso, indo em direção à 
borda esquerda do palco. Nesse caso, o deslocamento horizontal é 
realizado pelo decremento do valor da coordenada X, o que faz com 
que a imagem seja deslocada alguns passos à esquerda. O bloco 
mova também é utilizado para simulação do voo da arara azul, 
entretanto o incremento dos 10 passos é realizado por um valor 
negativo, tal ação faz com que seja decrementada a coordenada X 
da imagem, surtindo o efeito de deslocamento à esquerda, conforme 
pode ser observado na próxima figura. 


mova [10 ) passos 





Direção de deslocamento no eixo horizontal 
(decremento da coordenada X) 








Figura 3.18: Movimento da arara azul. 


Cada arara possui duas representações gráficas, uma com as asas 
batendo para baixo e outra para cima, e a intercalação das imagens 
no palco faz com que tenhamos a perspectiva de que o pássaro 
está realmente voando. Dessa forma, para que possamos dar 
realidade à cena, a cada deslocamento das araras devemos altemar 
as imagens por meio do controle de tempo. Ou seja, a cada fração 
de segundo modificaremos a posição da arara na cena e trocaremos 
a imagem a ser apresentada. 


As imagens associadas a um determinado ator são denominadas 
trajes, ou fantasias, e são acessadas na aba Fantasias, presente na 
paleta de blocos de instrução. Para trocar de uma imagem para 
outra usamos o bloco próxima fantasia . A figura ilustra o código de 
animação da arara vermelha. 





espera (03) seg 





ts 


Figura 3.19: Sequência de blocos de instruções da animação da arara vermelha. 





3.3 Efeitos de som 


Durante o voo dos pássaros será emitido um efeito sonoro, 
simulando o canto durante a travessia das araras na cena. Os 
efeitos sonoros ou músicas que podemos inserir em nossas 
animações estão disponíveis na galeria, acessada a partir da aba 
sons , presente na paleta onde se encontra o bloco de instruções. 
No projeto araras foi utilizado o efeito denominado squawk . Também 
podemos adicionar efeitos a partir de arquivos extemos, ou 
gravando efeitos diretamente no microfone de nosso computador. 


Para adicionarmos um efeito de som, a partir da galeria de sons de 
Scratch, devemos clicar no botão correspondente na interface 
gráfica da ferramenta e realizar a ação para escolha do efeito 
sonoro, conforme apresentado na figura. 


selecionar um Som 





Figura 3.20: Ação para escolha de um efeito sonoro a partir da galeria. 


A caixa de diálogo para seleção de um efeito de som será 
apresentada, veja a figura. Esta caixa é organizada em categorias 
de efeitos sonoros, portanto temos sons para representar: animais, 
notas musicais, instrumentos de percussão, voz humana, esportes, 
entre outros. Para a animação das araras devemos selecionar a 
categoria animais e, logo após, o efeito sonoro Squawk, o mais 
próximo que encontramos para simular o som da arara. 


+ Voltar Selecione um Som 


o  OOADAODAAAOO 
Grunt Horse Horse Gallop Jungle Frogs Meow Meow2 Moo 


4d od) 4d dy dy do sd 


Owl Rooster Screech Seagulls Snort Squawk Squeaks 


d) d) d) 


Tropical Birds Whinny Wolf Howl 





Figura 3.21: Caixa de diálogo para seleção de sons da galeria. 


Ao clicar sobre o efeito sonoro desejado, ele será apresentado na 
aba sons da ferramenta de edição de projetos, conforme podemos 
visualizar na próxima ilustração. Na caixa de diálogo há um campo 


de texto onde podemos informar o nome do som que desejamos 
buscar na galeria. 


Código Sons 
Qs 
Som Squawk ox 
Cortar Trecho 





© 


Figura 3.22: A aba para manipulação de efeitos sonoros. 


A barra vertical à esquerda apresenta os arquivos de sons que 
adicionamos no projeto. Ao selecionar um arquivo de som podemos 
editá-lo, adicionando efeitos: 


e mais rápido: acelera o andamento do efeito sonoro em alguns 
milissegundos, não há a possibilidade de configurarmos a 
velocidade, pois já é predeterminado, entretanto ao clicarmos 
várias vezes sobre o botão, o a velocidade vai aumentando 
gradativamente; 

e mais devagar: também há a possibilidade de inserirmos um 
efeito que retarda a reprodução do som em alguns 
milissegundos; 

e eco: acrescenta um efeito de eco no som. Clicando-se várias 
vezes o efeito de eco vai aumentando gradativamente; 

e robô: define um efeito de som robotizado, também pode ser 
aumentado gradativamente da mesma forma que os demais 
efeitos; 


e mais alto: podemos aumentar gradativamente o volume do 
efeito sonoro ao clicar várias vezes sobre o botão mais alto; 

e mais baixo: faz o efeito contrário do botão mais alto; 

e inverter: inverte o sentido de reprodução do som, fazendo com 
que o efeito seja reproduzido de trás para frente. 


Todo efeito que inserirmos em um som pode ser cancelado. Para 
isso devemos clicar no botão desfazer, presente na tela de edição 
de efeitos. O botão tem a aparência de uma seta voltada para 
esquerda. Também podemos refazer um efeito que acabamos de 
desfazer, basta clicar no botão com a seta virada para a direita. 


Além disso, podemos selecionar uma área que desejamos cortar em 
um efeito sonoro, encurtando o efeito, ou determinando a parte que 
desejamos reproduzir. Essa ação pode ser realizada através do 
instrumento tesoura, cuja descrição é cortar trecho, presente na 
interface gráfica do editor de sons. 


Por fim, podemos atribuir um novo nome ao som, visto que já vem 
com um nome padrão na galeria. No caso do som que utilizamos 
para as araras, podemos alterá-lo para "grasnar", e para isso 
devemos redigir a caixa de texto som. 


Adicionando o bloco de som 


Depois de inserir e editar os arquivos de som no projeto, podemos 
utilizá-los para inserção de efeitos sonoros nas nossas cenas, falas 
de personagens etc. Para isso, devemos utilizar os blocos de som 
de Scratch, os quais estão disponíveis na paleta de blocos. No 
projeto araras vamos inserir um bloco para emissão do granido das 
araras, enquanto elas estiverem realizando o voo pela cena. A figura 
demonstra como fica o código de voo da arara vermelha, após a 
inserção do bloco de som. 


quando for clicado 


UAEM 10 Muertas 


próxima fantasia 


toque o som Squawk + 


esperne 03) seg 





Figura 3.23: O voo da arara vermelha, emitindo o granido. 


Quando o botão de início da animação for clicado, a arara vai se 
movimentar dez passos à direita e a próxima ilustração da 
sequência será apresentada, então emitirá o som de granido e 
aguardar por uma fração de tempo. A lista apresenta os demais 
blocos que compõem o grupo de instruções relacionadas a 
manipulação de sons. 


e toca o som do início ao fim, sem interrupção, esperando 
finalizar a reprodução, não dá prosseguimento à execução do 
programa. 


toque o som Miau + até o fim 





dá início à reprodução do som, mas não espera finalizar, vai 
imediatamente para o próximo bloco. 


toque o som Squawk Y 





para todos os sons que estão em reprodução. 





pare todos os sons 





aumenta o tom, ou balanco, de um efeito sonoro, de acordo 
com o valor informado. 





adicione ao efeito tom * 


altera o valor do tom, ou balanco, de um som para o valor 
indicado. 


mude o efeito tom + para 100 





e remove todos os sons adicionados no projeto. 


remova os efeitos sonoros 





e adiciona um valor constante ao volume, aumentando caso seja 
positivo, ou diminuindo caso seja negativo. 


adicione 10, ao volume 


e muda o volume do efeito sonoro para o valor indicado. 








mr 
Pa 


eRe EA 100 





3.4 A aparéncia e comportamento dos 
personagens 


Scratch traz uma série de facilidades para manipulação de aspectos 
relacionados à aparência de um personagem ou elemento gráfico de 
uma cena. Com os blocos de instruções destinados à manipulação 
de aparência, podemos modificar fantasias (trajes) dos 
personagens, como vimos anteriormente, mas também podemos 
alterar cenários via programação, adicionando efeitos de cor, 
tamanho etc. 


Durante a execução de um projeto podemos modificar os 
comportamentos dos personagens, fazendo com que eles interajam 
com o usuário, emitindo falas ou pensamentos. Nesta seção, vamos 
explorar os blocos disponíveis para manipulação da aparência e 
comportamento dos personagens de uma cena. 


Uma cena de interação entre personagens 


Para entendermos como usar os blocos de aparência, bem como 
visualizarmos na prática o seu funcionamento, vamos criar uma 
cena onde dois personagens interagem, realizando um diálogo. 
Para isso, usaremos alguns blocos para que ocorra a interação e 
modificação da postura de cada personagem. A figura ilustra a 
primeira cena do projeto. 





Figura 3.32: Uma interação entre personagens. 


Trata-se do diálogo entre dois adolescentes: Abby e Dee. A 
interação entre os personagens inicia quando Abby encontra Dee na 
rua e o cumprimenta, logo a seguir, Abby comenta que precisa usar 
um skate no dia seguinte, Dee fica pensativo e, após alguns 
instantes, informa que vai emprestar o skate dele para Abby, então 
Abby fica muito contente e agradece. O diálogo é bem simples, mas 
envolve a sincronia das falas, ao longo do tempo, para que se 
estabeleça a conversa de forma adequada. 


No tempo em que ocorrem as falas entre os personagens, as 
expressões são altemadas, o que é realizado pela troca das 
fantasias (imagens dos personagens) durante a execução do 
projeto. A cada fatia de tempo as falas são altemadas, assim como 
as expressões, a sequência de imagens é apresentada na próxima 
figura. 





Figura 3.33: As cenas que compõem o diálogo entre os personagens. 


Cada imagem compõe uma cena que será apresentada. O projeto é 
composto de sete cenas, as quais são altemadas conforme o 
desenrolar do diálogo durante a interação dos personagens. 


Agora, vamos verificar os blocos de instruções que determinam as 
ações de cada personagem. Para a elaboração deste projeto, 
utilizaremos os blocos de aparência mude a fantasia, diga algo por 
alguns segundos € pense algo por alguns segundos . Na sequência, 
veremos como combinar o uso dos blocos de aparência com o 
controle de tempo para construção das falas e transição entre as 
cenas. Iniciamos pelas instruções que animam a personagem Abby, 
visto que ela inicia a interação entre eles. A figura apresenta a 
sequência de blocos. 


quando for clicado 


mude para a fantasia 1* 


diga | Olá, Dee! | por 2) segundos 


por O segundos 


por És segundos 





Figura 3.34: Blocos de instruções do comportamento de Abby. 


As ações que determinam o comportamento de Abby são 
disparadas quando se inicia a execução do projeto, portanto, a 
primeira ação é a mudança da fantasia da personagem, onde 
determinamos que a imagem 1 deve ser apresentada na cena. Em 
seguida, a personagem diz “Olá, Dee!” e a frase é apresentada na 
tela por 2 segundos, logo após, a personagem aguarda mais 2 
segundos para que o personagem Dee interaja com ela. Então, 
Abby diz “Preciso de um skate para amanhã”, note que o tempo que 
a mensagem é apresentada na tela também é por 2 segundos. 


Agora a fantasia é alterada para a imagem de número 2, que 
representa a personagem, então são aguardados mais 6 segundos 
para que termine a execução das ações de Dee. Por fim, trocamos a 
fantasia de Abby para a imagem 3 e apresentamos a última fala da 
personagem: “Que bom, muito obrigada Dee!”, por mais 2 
segundos. 


Note que o tempo é fundamental na sincronização das falas que 
compõem a interação entre os personagens nas cenas. Essa 
sincronização é que permite a composição do diálogo entre os 
personagens. Visto o comportamento de Abby, passamos a 
apresentação dos blocos de instruções de definem o 
comportamento de Dee, ilustrado através da figura a seguir. 


quando for clicado 


mude para a fantasia 1 * 


espere 2) seg 


diga por E segundos 

mude para a fantasia 2* 

Espere E seg 

| pense por É segundos 
espere 2) seg 


mude para a fantasia 









Ok, posso emprestar até amanhã. awy E segundos 


mude para a fantasia 4 * 





Figura 3.35: Blocos de instruções do comportamento de Dee. 


A seguir, os blocos para modificação da aparência e comportamento 
dos personagens são apresentados. 


e mostra uma mensagem na tela pelo tempo determinado em 
segundos. Este bloco é usado para emissão de falas dos 


personagens. 


diga cD por O segundos 


mostra uma mensagem na tela, mas sem tempo 
predeterminado. Sendo assim, a mensagem permanece. 


mostra uma mensagem em um baláo representando o 
pensamento do personagem, pelo tempo em segundos 
determinado pelo usuário. 


AE Hummm... Mi 2) segundos 


mostra a mensagem em um balão que representa o 
pensamento do personagem, mas permanece na tela por tempo 
indeterminado. 











REA Hummm... | 





bloco usado para troca da fantasia do personagem. Cada 
fantasia possui um nome de referência, o qual utilizamos para 
alteração. 


mude para a fantasia basketball + 





este bloco altera para a próxima fantasia da sequência de 
fantasias de um determinado personagem na cena. 


próxima fantasia | 





também, podemos altemar os cenários em nosso projeto, para 
isso utilizamos este bloco onde devemos informar o nome do 
novo cenário. 


mude para o cenário cenário! + 





outra possibilidade é mudarmos para o próximo cenário, na 
sequência de cenários de nosso projeto. 


próximo cenário 





adiciona o fator de proporção indicado ao tamanho do 
personagem, exemplo: aumenta em 10% o tamanho do 
personagem. Se o fator for negativo o tamanho é diminuído. 





adicione 10) ao tamanho 


e muda o tamanho do personagem para a proporção indicada, 
exemplo: troca o tamanho do personagem em 100% do 
tamanho atual. Caso a proporção seja negativa, reduz o 
tamanho do personagem. 


mude o tamanho para | 





e adiciona um fator que incrementa ou decrementa o efeito de cor 
de um personagem. Se for informado um número negativo, 
reduz o fator de efeito. 


adicione 25) go efeito cor + 


e muda o fator de cor para o valor indicado pelo usuário. 


mude o efeito cor* para 


e limpa todos os efeitos gráficos que foram aplicados a um 
determinado ator até o momento. 








remova os efeitos gráficos 





e mostra o ator na cena. 





e esconde o ator na cena. 


esconda 





3.5 Tratamento de eventos 


Nossos projetos, tanto de narrativas que refletem a interação de 
personagens em uma cena, como em animações que são 
controladas por tempo ou ocorrência de situações que determinam 
as ações dos personagens, bem como em jogos onde a interação é 
realizada pelos cliques no mouse ou pressionamento de teclas, são 
controlados por eventos. 


Os eventos são a tônica para elaboração de projetos atrativos com 
muita interação e sincronização de ações. Portanto, nesta seção 
veremos como manipular eventos para construção de nossas cenas 
em um projeto. Iniciamos pela descrição do grupo de blocos de 


eventos disponíveis no ambiente de Scratch. A listagem apresenta 
quais são os blocos que podemos utilizar. 


e este foi o primeiro evento que vimos, pois dá início à execução 
do projeto no ambiente de Scratch. O evento é acionado 
quando a bandeira for clicada. 


quando for clicado 





e quando desejamos controlar que ação deverá ser realizada se a 
tecla informada for pressionada. Geralmente, é utilizado em 
jogos para mover personagens pela tela. 


quando a tecla espaço + for pressionada 





e evento que permite a verificar se um personagem foi clicado, 
assim podemos realizar alguma ação de resposta. 


quando este ator for clicado 





e a mudança de cenário também pode ser controlada, este 
evento é gerado sempre que isso ocorre. 


quando o cenário mudar para cenánol * 





e quando o cronómetro for maior que determinado valor. Muito útil 
para controle de tempo em nossos projetos. 


quando ruido + 





e este bloco deve ser utilizado para troca de mensagens entre os 
personagens. As mensagens são muito úteis para controlarmos 
o disparo e sincronização de ações. 


quando eu receber mensagem 1 + 





e permite identificar se uma determinada mensagem foi emitida, 
usamos este bloco em conjunto com o anterior para 
sincronização de ações. 





e parecido com o bloco utilizado para emissão de uma 
mensagem, a diferença está no fato de que a mensagem é 
emitida e o personagem fica parado esperando a resposta. 


transmita mensagem 1 + eespere 





Para exemplificação da utilidade dos blocos de eventos, vamos 
apresentar uma animação que faz o controle de alguns eventos para 
sincronização das ações realizadas pelos personagens. 
Inicialmente, faremos uma explanação da animação para 
entendermos que tipos de eventos vão ocorrer. 


Trata-se de uma cena que simula um lance em um jogo de Baseball, 
onde um jogador realiza o lançamento da bola, a qual deverá ser 
rebatida pelo outro jogador. A cena é animada com a altemância 
entre as imagens gráficas que representam os personagens ao 
longo do tempo. Além disso, efeitos sonoros são introduzidos na 
cena para dar mais realidade. A figura apresenta o cenário e os 
personagens que compõem a animação para termos uma ideia do 
projeto. 








= 
a 
IN 


Figura 3.59: Animacáo do jogo de Baseball. 


Comecamos pela apresentacáo do jogador que realiza o arremesso 
da bola. Ele possui quatro fantasias, ilustradas na próxima figura. 
Cada fantasia representa uma fase do movimento de arremesso 
realizado pelo jogador. A ordem ilustrada na figura, da esquerda 
para direita, representa a sequéncia dos movimentos, vejamos cada 
fantasia: 


e fantasia 1: posição inicial do jogador, concentrado para o 
arremesso; 

e fantasia 2: realizando o movimento inicial para o arremesso; 

e fantasia 3: sequência de impulso para o arremesso; 

e fantasia 4: realizando o arremesso. 


Na animação as fantasias são altemadas a cada fatia de tempo, 
dando a impressão do movimento de arremesso sendo realizado. 


Ao finalizar o arremesso, o jogador é apresentado na tela com sua 
primeira fantasia. 


RAIA 


Figura 3.60: Sequência de movimentos do arremessador. 





Agora, vamos analisar a porção de código que anima o lance de 
arremesso, descrevendo em detalhes cada bloco de construção. A 
figura ilustra a composição de blocos de instruções do jogador. 


A animação inicia pela ocorrência do evento quando a bandeira for 
clicada , evento extemo gerado pela interação do usuário com a 
aplicação, dando início à execução do projeto. Logo a seguir, 
trocamos a imagem do arremessador para sua próxima fantasia, 
então uma pausa no processamento das instruções é realizada por 
um décimo de segundo. Essa sequência de instruções é realizada 
mais duas vezes e, na sequência, a imagem inicial do arremessador 
é novamente apresentada na tela. 


Ao final da animação do arremessador, o evento transmita é 
emitido. Esse evento funciona da seguinte forma: uma mensagem 
textual é enviada para o ambiente de execução de Scratch, outro 
personagem pode capturar este evento para realização de uma 
tarefa. Dessa forma, temos um meio de comunicação entre 
personagens através da troca de mensagens, o que é uma técnica 
importante para troca de informações entre os elementos que 
compõem a cena. Neste caso, é transmitida a mensagem “joguei” 
ao ambiente, informando que a jogada de arremesso foi realizada 
pelo jogador. 


quando for clicado 


próxima fantasia 


espere seg 


próxima fanta 


transmita joguei + 





Figura 3.61: Blocos de instruções do arremessador. 


A mensagem “joguei” será capturada pela personagem bola, a qual 
depende dessa comunicação para realização de sua animação, que 
é o seu deslocamento em direção ao personagem rebatedor. O 
movimento da bola é sincronizado com o movimento do 
arremessador através da combinação do evento transmita € O 
evento quando receber , veja a figura. 


quando eu receber joguei + 


transmita joguei + 





Figura 3.62: Sincronização de animações por eventos de mensagens. 


Após a realização da animação do arremessador, passamos a 
analisar o movimento da bola. Como vimos, o deslocamento da bola 
é realizado em direção ao personagem rebatedor e inicia, logo após, 
a finalização do arremesso. Vejamos os blocos de código que 
realizam a animação da bola na cena através da figura. 


quando for clicado quando eu receber joguei + 


esconda aponte para jogador? + 


toque o som Whiz +» 


deslize por A segs. até x: [ 129) y: ( -101 ] 


vá para a camada trás + 


quando eu receber rebati + 


toque o som Cheer + 


deslize por O segs. até x: y: [ 129) 


esconda 





Figura 3.63: Blocos de instruções da animação da bola. 


A animação da bola é realizada por três blocos de códigos distintos, 
cuja execução é disparada pela ocorrência dos seguintes eventos: 


1. quando a bandeira for clicada : ao início de execução do projeto, 
a bola é posicionada em uma região da tela, próxima ao 
arremessador, mas não pode aparecer ainda na cena, somente 
vai aparecer ao final do arremesso, portanto escondemos a 
imagem, tomando-a invisível; 


2. quando eu receber a mensagem “joguei” ! quando a bola recebe a 
mensagem “joguei”, emitida pelo jogador arremessador, ela 


deve aparecer na tela e o bloco mostre faz isso; na sequência, 
usamos o bloco aponte para , fazendo com que a bola seja 
direcionada ao jogador 2 (rebatedor); em seguida, um efeito 
sonoro para marcar o deslocamento da bola é emitido e a bola 
é deslizada por um segundo na direção informada pelas 
coordenadas X e Y; para finalizar, enviamos a bola para o 
segundo plano na cena, pois desta forma ela é apresentada sob 
o bastão do batedor. 


3. quando eu receber a mensagem “rebati” : este evento ocorrerá 
quando o segundo jogador (rebatedor) finalizar sua animação, 
pois emitirá a mensagem rebati , informando ao personagem 
bola que uma nova ação deve ser realizada, que, neste caso, 
trata-se do desvio da trajetória da bola em decorrência da 
jogada do rebatedor. Inicialmente, um efeito sonoro de palmas 
do público é emitido, a bola é deslizada por um segundo em 
direção ao canto superior esquerdo da cena, e ao término do 
deslocamento a bola é escondida novamente, onde temos a 
impressão de ter ultrapassado os limites da cena. 


O último conjunto de blocos de instruções que veremos será o 
associado à animação do segundo jogador presente na cena, o 
rebatedor. A figura ilustra a sequência lógica das instruções. 


quando for clicado 


espere seg 


nróxima fantasia 





toque o som Basketball Bounce + 


espere 03) seg 


transmita rebati a 


Figura 3.64: Blocos de instruções do rebatedor. 


Os movimentos do personagem iniciam ao mesmo tempo em que o 
evento de início da execução do projeto é gerado. Sendo assim, 
antes de disparar o ciclo de troca de fantasias, o personagem 
aguarda por quatro décimos de segundo e então passa para 
próxima fantasia. A dupla de blocos, pausa e a troca de fantasias, é 
executada por mais duas vezes, então o efeito de som que reflete a 
batida do taco na bola é emitido. Em seguida, ocorre uma pausa de 
mais três décimos de segundo, antes da última troca de fantasia, 
finalizando a animação com a transmissão da mensagem “rebati”. 


Resumo do capítulo 


O capítulo abordou a elaboração de animações em Scratch. 

E xploramos algumas funcionalidades e, principalmente, os blocos 
de instruções da ferramenta. Iniciamos pela elaboração de um 
cenário e sua aparência, explorando suas características através do 
compartimento de gerenciamento de cenários. Em seguida, 
passamos à manipulação do movimento dos personagens de 
nossos projetos, onde conhecemos os blocos de instruções que 
utilizamos para modificar o comportamento dos elementos gráficos. 
Logo em seguida, vimos como inserir efeitos sonoros nas cenas, 
efeitos que podem ser associados aos personagens ou ao próprio 
cenário. Também pudemos manipular os arquivos de sons, 
modificando suas características. 


Outro aspecto abordado no capítulo foi a manipulação da aparência 
e comportamento dos personagens, recurso que permite a criação 
de cenas onde os personagens possam interagir uns com os outros. 
Para isso, exploramos o conjunto de blocos de aparência. 


Ao final do capítulo, estudamos o tratamento de eventos, que é um 
aspecto muito relevante na sincronia de ações dos personagens de 
um projeto, seja em animações ou jogos. Verificamos a forma como 
podemos trocar informações entre os personagens, bem como o 

uso do controle do tempo para transição entre as imagens gráficas. 


3.6 Exercícios 


3.1) Crie um projeto denominado urso e faça: 

a) Adicione o cenário mountain. 

b) Insira o personagem Bear-walking . 

c) Visualize as fantasias do personagem, note que são 8 imagens. 


d) Edite o código do urso e insira a seguinte sequência de blocos de 
instruções: 


e evento: Quando bandeira for clicada; 

e movimento: mova 5 passos (note que devemos editar o valor dos 
passos, por padráo sáo 10); 

e controle: Espere 0.3 segundos (também deve ser editado, pois o 
padráo é 1 segundo); 

e aparência: Próxima fantasia. 


e) Repita a sequéncia de blocos: movimento, controle e aparéncia 
por mais seis vezes. 


f) Execute a animacáo. 


3.2) Crie um novo projeto denominado nano diz ola e realize as 
seguintes operações: 


a) insira o personagem nano no centro da base do cenário. 


b) Nano possui quatro fantasias, deixe somente as duas primeiras, 
exclua as outras. 


c) Mude o cenário para moon . 
d) Selecione a aba de código e insira: 


e evento: Quando a bandeira for clicada, 
e controle: Espere 1 segundo ; 
° aparência: Diga Olá por 2 segundos . 


3.3) Elabore um projeto denominado Dog e realize as seguintes 
tarefas: 


a) Adicione a imagem Dog? . 
b) Altere o tamanho do cão para 60% do tamanho original. 
c) Escolha a imagem de cenário Farm. 


d) Construa a seguinte sequência de blocos para o cão e depois 
execute o projeto: 


quando for clicado 


mova (15, passos 
espere (03, seg 


próxima fantasia 


mova (15) passos 
Espere (03, seg 


pròxima fantasia 





Figura 3.65: Blocos de instruções do cão. 


3.4) No projeto Dog do exercício anterior, realize uma 
modificação no código para inserção do bloco de som que 
emite o efeito dog1 (latido do cão), como último bloco. Clique na 
aba de edição de som e faça: 


a) Aumente a velocidade do latido em três vezes, teste e depois 
diminua três vezes; 


b) Adicione um eco ao latido; 


c) Atribua o efeito de robô ao latido. 


Os códigos dos exercícios podem ser obtidos em: 
3.1 Urso: https://scratch.mit.edu/projects/441701652/ 
3.2 Nano diz olá: https://scratch.mit.edu/projects/245177207/ 


3.3 e 3.4 Dog: https://scratch.mit.edu/projects/441707659/ 





CAPÍTULO 4 
Enriquecendo as animações 


Neste capítulo, vamos explorar outros recursos de programação de 
Scratch e enriquecer ainda mais nossos projetos de animações. 
Veremos como controlar os personagens de nossas cenas, 
otimizando a realização de ações com o aninhamento de blocos de 
instruções em estruturas de controle. 


Um aspecto a ser explorado é a tomada de decisões, portanto 
veremos como nossas animações podem tratar casos onde é 
necessária a avaliação de uma situação para que uma ação ou 
outra seja realizada. Vamos nos deparar com muitas situações 
dessa natureza, onde decisões devem ser tomadas pelos nossos 
personagens. 


Também veremos como realizar o controle de ações que devem ser 
repetidas por um certo número de vezes, como é o caso da 
simulação da caminhada de um personagem em nossas cenas. 
Trata-se de um conjunto de instruções comportamentais que 
definem o deslocamento do personagem e mudança de sua imagem 
ao longo do trajeto, visando simular os movimentos das pemas e 
braços. O controle de repetição de blocos será muito utilizado na 
construção de nossos projetos. 


Os sensores do ambiente de Scratch é outro recurso importante de 
ser entendido e explorado, visto que permite um maior controle 
acerca do ambiente, pois traz informações úteis, tais como: 
coordenadas da posição onde se encontra o mouse, dimensões do 
palco, se alguma tecla foi pressionada etc. 


4.1 Explorando os sensores do ambiente 


Os sensores nos permitem obter informações acerca do ambiente 
de execução de nossos projetos. Muitas vezes, precisamos saber se 
o mouse foi pressionado e em que ponto do palco se encontra. Esse 
tipo de informação permite avaliarmos se um determinado 
personagem foi clicado para que possamos tomar uma decisão 
sobre qual ação deve ser executada. Em outras situações, 
desejamos verificar se uma determinada tecla foi pressionada, o que 
é essencial para casos em que o controle de um personagem é 
realizado pelo teclado. Sendo assim, vamos descrever cada bloco 
presente na categoria de instruções de sensores, conforme 
podemos observar na sequência. 


e Este é um sensor de toque, o qual informa se o personagem 
está em contato com o ponteiro do mouse, ou a borda do palco. 









tocando em ponteiro do mouse + ? 


Figura 4.1: Sensor de toque. 


e Com este sensor podemos verificar se o personagem está em 
contato com uma determinada cor presente no palco. A cor 
pode ser selecionada pelo usuário. 


dl 


tocando na cor | 


a, P” 
a! 





Figura 4.2: Sensor de contato com cor. 


e O sensor de cores permite verificarmos se uma determinada cor 
está em contato com outra em um determinado momento da 
execucáo do projeto. 


= 


acor ( | está tocando na cor | 





Figura 4.3: Sensor de contato entre cores. 


e Sensor que permite verificarmos a distância entre um elemento 
gráfico e o ponteiro do mouse. 


distância até ponteiro do mouse * 





Figura 4.4: Sensor de distância do ponteiro do mouse. 


e Este sensor possibilita a inserção de uma caixa de diálogo para 
interação, durante a execução do projeto. 


AMIA Qual o seu nome? RS 





Figura 4.5: Sensor de pergunta. 


e O sensor de resposta atua em conjunto com o sensor de 
interacáo, apresentado no item anterior. Com ele, podemos 
verificar qual foi a resposta digitada. 


resposta 





Figura 4.6: Sensor de resposta. 


e Com o uso deste sensor podemos avaliar se uma determinada 
tecla foi pressionada. A tecla que desejamos avaliar deve ser 
selecionada em uma lista. 


tecla espaço * pressionada? 





Figura 4.7: Sensor de tecla. 


e Para verificarmos se o mouse foi pressionado pelo usuário em 
um determinado instante, durante a execução do projeto. 


mouse pressionado? 





Figura 4.8: Sensor botão do mouse. 


e Sensor utilizado para retomar o valor da coordenada X do 
mouse. 





posição x do mouse 


Figura 4.9: Sensor posição x do mouse. 


e Sensor utilizado para retomar o valor da coordenada Y do 
mouse. 


posição y do mouse 





Figura 4.10: Sensor posição y do mouse. 


e Este sensor permite que, em tempo de execução do projeto, 
possamos alterar o estado do objeto para arrastável ou náo 
pelo palco. 


mude modo de arrasto para arrastável + 





Figura 4.11: Sensor de estado do objeto. 


e O sensor de ruído permite alterarmos o valor da intensidade de 
captura de sons pelo microfone do computador, em uma 
variação que vai de 1 a 100. 





Figura 4.12: Sensor de ruído. 


e Sensor que informa o valor atual do cronômetro em segundos. 


cronômetro 





Figura 4.13: Sensor de cronômetro. 


e O sensor permite reiniciar o cronômetro, zerando seu valor para 
uma nova contagem. 


zere o cronómetro 





Figura 4.14: Sensor de reset do cronómetro. 


e Este sensor traz várias informações de posicionamento em 
relação ao palco, que pode ser: coordenadas, direção, fantasia, 
tamanho, volume etc. 


posição x * de Palco + 





Figura 4.15: Sensor de posição. 


e Sensor utilizado para coletar informações do ambiente do 
sistema, tais como: data, ano, mês, dia da semana, hora, 
minuto e segundo. 


ano * atual 





Figura 4.16: Sensor de dados do ambiente. 


e Sensor que traz o número de dias passados desde o ano 2000. 


número de dias desde 2000 





Figura 4.17: Sensor de dias. 


O projeto que será apresentado a seguir ilustra a utilização de 
sensores em nossas animações. Vejamos como criar um 
personagem que interage, emitindo uma saudação e perguntando o 
nome. A cena é composta por um único personagem, o Goblin, que 
possui quatro fantasias, mas para este projeto vamos utilizar 
somente as duas primeiras imagens do personagem, ilustradas na 
figura. 





Figura 4.18: Fantasias de Globin. 


A listagem apresenta cada uma das cenas que compõem a 
animação de Goblin, bem como sua interação, durante a execução 
do projeto. Podemos observar o que cada bloco faz e qual a cena 
que será apresentada em decorrência da execução das instruções. 
A seguir, descreveremos em detalhes cada etapa de execução do 
projeto. A animação é apresentada em cinco cenas. Sendo assim, 
veremos uma breve descrição das instruções associadas a cada 
cena: 


e À primeira cena é apresentada logo que o projeto é executado, 
a primeira imagem de Goblin aparece na tela e um segundo é 
aguardado. 


quando for clicado 


espere 1) seg 








Figura 4.19: Primeira cena. 


e Entra a segunda cena onde Goblin acena e emite a saudação 
olá , para isso trocamos para próxima fantasia e usamos o 
bloco de instrução diga para emitir a saudação, então o bloco 
de controle espere é inserido para realização de uma pausa de 
um segundo no processamento da animação. 


próxima fantasia 


Espere 1, seg 





Olá! 





Figura 4.21: Segunda cena. 


e Na terceira cena, a imagem do Goblin é alterada novamente 
para a sua fantasia inicial e usamos o bloco de sensor pergunte 
e espere para interagir com o usuário, perguntando o nome, esta 
ação aguarda até que algo for digitado. 


mude para a fantasia goblina * 


Ep Qual é o seu nome? Malta 





Qual é o seu nome? 





Q 


Figura 4.23: Terceira cena. 


e Na quarta cena, após a interação, novamente é alterada a 
imagem para a próxima fantasia do personagem e usamos o 
bloco diga para emissão de uma outra saudação. 


próxima fantasia 





diga Lola! por (2 ] segundos 


Ola! 





Figura 4.25: Quarta cena. 


e Por fim, na quinta cena, o bloco diga é reutilizado para 
emissão do nome informado, a animação encerra mostrando a 
imagem inicial de Goblin. 


diga resposta ROM 10) segundos 


mude para a fantasia goblna * 





Carlos 





Figura 4.27: Quinta cena. 


4.2 Elementos de controle dos atores 


Para um melhor controle dos elementos envolvidos em uma 
animação, ou personagens de um jogo, Scratch disponibiliza uma 
categoria de blocos de instruções denominada controle, a qual é 
apresentada na listagem. 


e Este bloco de controle já foi usado em outras ocasiões, e é 
muito utilizado para marcarmos tempo de transição em uma 
animação. 


espere 1) seg 





Figura 4.29: Controle de tempo de transição. 


e Quando desejamos repetir um conjunto de instruções um certo 
número de vezes informado. 








Figura 4.30: Controle de número de repetições. 


e Este bloco faz a repetição de um grupo de instruções de forma 
indefinida, sem um número de vezes predefinido. 


Sempre 





Figura 4.31: Controle de repeticáo indefinida. 


e Usado quando desejamos implementar uma tomada de decisão 
em nossos projetos, de acordo com a decisão um conjunto de 
instruções é realizado. 





Figura 4.32: Controle de tomada de decisão simples. 


e Semelhante ao bloco de tomada de decisão apresentado 
anteriormente, a diferença é que se a expressão avaliada não 
for verdadeira, temos um conjunto de instruções altemativo a 
ser executado. 


então 





Figura 4.33: Controle de tomada de decisão composta. 


e Insere uma pausa no processamento do projeto até que a 
condição informada seja estabelecida. 


espere até que 





Figura 4.34: Controle de pausa. 


e Repete um bloco de instruções até que a condição informada 
seja realizada. 


repita até que 





Figura 4.35: Controle de repetição determinada. 


e Interrompe a execução das instruções de um ator, ou de todos 
os atores de um determinado projeto. 


pare todos * 





Figura 4.36: Controle de interrupção de instruções. 


e Gera uma cópia de um ator. 


quando eu começar como um clone 





Figura 4.37: Controle de cópia de um ator. 


e Evento gerado quando for criada uma cópia do personagem. 


crie clone de esteator * 





Figura 4.38: Controle do evento de cópia. 


e Bloco utilizado para exclusão de uma cópia do personagem da 
cena. 


apague este clone 





Figura 4.39: Controle de exclusão de cópias. 


4.3 Repetição de ações 


Para entendermos melhor as estruturas de controle, vamos elaborar 
uma pequena animação que fará uso da repetição de um conjunto 
de instruções por um certo número de vezes. Faremos uso desta 
técnica para simular a caminhada de um urso pelo cenário, onde os 
passos do animal serão animados pela troca de fantasias a cada 
iteração. A figura a seguir ilustra o cenário da animação, onde 
podemos ver um urso postado, próximo à borda direita do cenário, 
em direção à outra extremidade da cena. O personagem vai realizar 
o movimento e, quando chegar ao ponto de destino, ficará erguido 
nas duas patas inferiores. 





Figura 4.40: Cenário da animação. 


A figura ilustra o conjunto de blocos de instruções utilizados para 
animação do personagem na cena. Notem o uso da estrutura de 
controle para estabelecer a repetição da sequência de instruções 


aninhadas por dez vezes. Esta estrutura também é chamada de laço 
de repetição, pois todas as instruções que se encontram no interior 
do bloco serão repetidas pelo número de vezes indicado. 


quando for clicado 


mude para a fantasia —bear-walk-a Y 


vá para x: [73] Y: 
repita O vezes 


mova passos 


próxima fantasia 


espere SE 


F 














Figura 4.41: Controle de repetições das instruções. 


Todo processo ocorre quando a animação for iniciada. A primeira 
instrução a ser executada é o ajuste da fantasia inicial do 
personagem, fazendo com que seja apresentada na tela a primeira 
imagem associada ao urso. Depois, o personagem é posicionado na 
região da cena, onde será visto pela primeira vez, quando a 
animação começar. A estrutura de controle de repetição é inserida 
no código da animação para controlar o número de vezes que as 
in struções mova, próxima fantasia € espere Serão repetidas, neste 
caso, a repetição será por 9 vezes. O urso vai andar 10 passos, a 
próxima imagem será apresentada e será aguardado 1 décimo de 
segundo. Ao final da repetição a animação é finalizada. 


4.4 Tomada de decisão 


Outra estrutura de controle que vamos utilizar na construção de 
nossos projetos é a tomada de decisão, vejamos um exemplo de 
uso desta estrutura em uma pequena animação, onde um balão 
realiza um movimento de subida na área do palco e, quando atinge 
o topo, some da tela. A figura apresenta a imagem do palco e o 
código associado a esta animação. 





quando for clicado 





12 -13 


Pa 
Gà 





Figura 4.42: Estrutura de controle para tomada de decisão. 


Logo ao iniciar a animação, a imagem é apresentada e posicionada 
na tela nas coordenadas informadas no bloco de instrução vá para. 
O próximo bloco de instrução faz com que o balão deslize sobre a 
cena, fazendo o efeito de subida em direção à borda superior do 
cenário. Ao final do conjunto de instruções que compõem a 
animação, temos a estrutura de tomada de decisão, a qual avalia se 
o balão está tocando no topo da tela, em caso afirmativo o balão 
some da cena, dando a impressão de que tenha estourado. 


4.5 Combinando repetição com tomada de 
decisão 


Também podemos combinar o uso de estruturas de tomada de 
decisão com a repetição de blocos de instruções em um mesmo 
código de programa. Na verdade, este é um recurso muito utilizado 
para termos mais controle sobre as ações a serem realizadas em 
nossos projetos, permitindo-nos agrupar instruções e reduzir o 
número de blocos em um código de programa. Vejamos outro 
exemplo, a animação de Jaime andando pela rua. Ao encontrar uma 
poca de água, o personagem para. Podemos observar a cena e os 
blocos de instruções relacionadas a ela através da figura. 














vá para x: 





Figura 4.43: Combinação de repetição tomada de decisão. 


O primeiro bloco de instrução define a imagem inicial do 
personagem, logo após, o bloco de posicionamento define o ponto 
do cenário de onde o personagem parte para sua caminhada, e em 
seguida vem a estrutura de repetição. Note que a estrutura de 
repetição utilizada neste exemplo é indeterminada, ou seja, diferente 
da apresentada no exemplo anterior, onde o número de vezes que 
as instruções deviam ser repetidas estava definido no próprio bloco 
de controle. As estruturas de repetição indeterminada são usadas 
quando não desejamos, ou não sabemos ao certo, o número de 
vezes que as instruções aninhadas no bloco devem ser repetidas, 
como é o caso da animação apresentada. 


A cada iteração do laço de repetição, o personagem anda 15 passos 
e passamos para sua próxima fantasia. Após, é realizada uma 
pausa no processamento do personagem por um tempo de 2 
décimos de segundo. Como o número de vezes que as instruções 
serão repetidas é indeterminado, precisamos estabelecer uma 
condição de finalização do laço de repetições, caso contrário, o 
personagem ficará andando sem parar. 


Para interrompermos o laço de repetição e, consequentemente, 
encerrar a animação, devemos inserir uma estrutura de tomada de 
decisão, a qual vai avaliar uma condição de parada. Neste caso, a 
condição de parada é quando o personagem atingir a poça de água, 
o que é verificado pelo sensor de cor. Logo, se o personagem entrar 
em contato com a cor da poça de água, o script de execução da 
animação do personagem é interrompido. Como não há mais 
instruções a serem processadas, o projeto é encerrado. 


Vamos retomar o projeto Araras, apresentado no início do capítulo 
anterior, e analisar a animação completa do voo das araras sobre o 
cenário. A figura apresenta os eventos e blocos de códigos 
associados ao controle do voo da arara vermelha. Note uma 
curiosidade acerca do código, que é a escrita do evento quando a 
bandeira for clicada duas vezes. Sim, podemos criar duas linhas de 


execução paralelas para um mesmo evento nos nossos projetos, ou 
seja, quando a execução do projeto for iniciada, teremos o bloco 
que controla o voo sendo executado e, em paralelo, o bloco de 
controle da emissão do canto. 


quando for clicado quando for clicado 





mude para a fantasia parrotb Y repita até que tocando em borda +» 


aro E O 


sempre 


mova (10) passos 


próxima fantasia 


espere (03) seg 


se tocando em borda v ? então 


pare este script v» 


Figura 4.44: Blocos de animação da arara vermelha. 


O conjunto de blocos de instruções (A) executam o controle do voo 
da arara vermelha, enquanto que o conjunto de blocos (B) faz o 
controle do canto. Vejamos os detalhes de codificação das 
instruções de cada bloco a seguir: 


e (A) a primeira instrução de controle do voo é a que determina a 
fantasia inicial da ave. Logo após, vem a instrução que 


posiciona a arara no canto superior esquerdo do cenário, então 
surge o laço de controle que engloba as demais instruções, que 
são: o movimento da arara por 10 passos, alteração da imagem 
para próxima fantasia, 3 décimos de segundo que são 
aguardados, finalizando com um teste para tomada de decisão, 
o qual verifica se a ave atingiu a borda; em caso afirmativo, a 
animação é finalizada. 


e (B) o controle do canto da arara é realizado por uma linha de 
execução de instruções, paralela à linha de instruções do voo, 
onde temos um bloco de repetição que controla a emissão do 
efeito sonoro referente ao canto. Enquanto a borda do cenário 
não for atingida pela arara, o som é emitido a cada 3 segundos. 


Os blocos de execução da animação da arara azul são muito 
semelhantes aos da arara vermelha, a não ser pelo fato de que a 
arara azul realiza o voo no sentido contrário, ou seja, indo em 
direção à borda esquerda do cenário. Essa característica faz com 
que tenhamos que passar um valor negativo para instrução mova. 
Além disso, o som emitido pela ave azul é mais estridente, isso foi 
realizado pela modificação das propriedades do arquivo de som, 
onde o atributo velocidade foi alterado para que seja emitido mais 
rápido. 


Resumo do capítulo 


Neste capítulo, exploramos aspectos importantes na elaboração de 
projetos de animações e jogos, tais como estruturas de tomada de 
decisão e repetição. Essas estruturas serão muito utilizadas para 
controle de ações dos personagens em nossos projetos. 


A aplicação da tomada de decisão foi exemplificada com situações 
práticas envolvendo testes para avaliar quando uma determinada 
ações deverá ser realizada, como foi o caso da verificação dos 
limites de um cenário, evitando-se que o personagem avance além 
da borda. 


Também foram explanados os sensores do ambiente, os quais 
permitem um maior controle de eventos, tais como: interação do 
usuário com o projeto, colisão com a borda etc. Outro aspecto 
detalhado no capítulo foi a combinação de duas estruturas de 
controle importantes na construção de animações e jogos, que são: 
repetição e tomada de decisão. Ao longo do livro veremos que os 
projetos apresentados utilizarão muita combinação dessas 
estruturas para construção de scripts de código dos personagens. 


4.6 Exercícios 


4.1) Crie um projeto denominado Scratch curioso e realize as 
seguintes ações: 


a) Insira o personagem gato curioso, cuja imagem é a cat, presente 
na galeria. 


b) Codifique as ações do gato no script de início da execução do 
projeto. 


c) Faça com que o gato realize uma saudação, após, pergunte qual 
é a sua cor. 


d) Elabore uma estrutura de tomada de decisão que avalie a 
resposta do jogador. Se a resposta for “amarelo” faça o gato dizer 
“muito bem”, caso contrário, deve dizer “hum, não é essa”. 


4.2) No mesmo projeto do exercício anterior, codifique o script 
que intercepta o clique do mouse sobre o personagem: 
“quando este ator for clicado”, fazendo com que o gato emita o 
som “miau”. 


4.3) Elabore um novo projeto denominado aquário e realize as 
seguintes tarefas: 


a) Insira dois tubarões no projeto: “shark” e “shark2”. 


b) O primeiro tubarão, imagem “shark”, deve ser colocado na 
extremidade esquerda e base do palco, já o segundo (“shark2”) 
deve iniciar na extremidade direita do topo do palco. 


c) Reduza em 60% o tamanho das imagens dos tubarões. 


d) Codifique O script do evento quando bandeira for clicada do 
primeiro personagem, fazendo com que uma estrutura de repetição 
seja executada para que o peixe fique nadando de um lado para 
outro no palco. 


e) Faça o mesmo para o script de controle do segundo tubarão. 


f) Note que, se algum tubarão atingir a borda do cenário, deverá 
fazer o movimento inverso, evitando-se que o personagem extrapole 
os limites do palco. 


9) A cada movimento dos tubarões, devemos trocar para a próxima 
fantasia, fazendo com que o personagem seja animado. 


h) Acrescente a emissão de um efeito sonoro a cada vez que um 
personagem atingir a borda do aquário. Escolha o efeito da galeria 
de sons. 

Os códigos dos exercícios podem ser obtidos em: 


4.1 e 4.2 Scratch curioso: 


https://scratch.mit.edu/projects/441719605/ 


4.3 Aquário: https://scratch.mit.edu/projects/442172205/ 





CAPÍTULO 5 
Trabalhando com dados 


Durante a elaboração de nossos projetos, nós nos deparamos com 
situações em que devemos manipular valores, seja para armazenar 
a pontuação do personagem em um jogo, informar o nome do 
jogador, controlar o número de vezes que um bloco de instruções 
deve ser repetido, enfim, são inúmeros os casos de uso de dados 
em nossas aplicações. Para isso, Scratch traz um recurso 
denominado vari vel que permite a representação de valores 
utilizados em nossos projetos. 


Note que uma variável pode representar algum tipo de dado útil para 
os personagens de nossos projetos, como: dados numéricos que 
representam quantidades, peso, altura, coordenadas de tela, 
número da fantasia etc.; ou, ainda, dados que representam 
informações textuais, como: nome do ator, nome da cena, nome da 
fantasia etc. 


Com os dados do tipo numérico, podemos realizar operações 
aritméticas, como acumular valores de pontuação, ou subtrair 
pontos por faltas cometidas em um jogo. Também podemos fazer 
comparações de valores numéricos, o que é útil para estruturas de 
tomada de decisão durante a execução de um script de 
personagem. 


Na sequência, veremos como manipular dados em nossos projetos, 
sejam dados que representam informações textuais, ou dados que 
fazem referência a valores numéricos. Também veremos como 
realizar operações básicas com dados. A lista apresenta o grupo de 
blocos de instruções para manipulação de variáveis. 


e Este é o botão de comando que permite a criação de uma nova 
variável. 


Criar uma Vanável 


Figura 5.1: Botão de criação de variável. 


e Todas as variáveis criadas pelo usuário serão apresentadas 
desta forma pela ferramenta. 


O 


Figura 5.2: Apresentação de variáveis. 





e Este bloco é utilizado quando desejamos adicionar o valor 
informado na variável. 


adicione nome * a 





Figura 5.3: Bloco de adição de valor à variável. 


e Com o uso deste bloco, é possível alterarmos o valor da 
variável conforme o novo valor informado. 


mude nome * para ép 





Figura 5.4: Bloco de alteração do valor da variável. 


e Bloco usado para mostramos o valor atual de uma variável no 
cenário. 


mostre a variável nome * 





Figura 5.5: Bloco para mostrar a variável no cenário. 


e Caso não desejamos apresentar o valor da variável no cenário 
devemos usar este bloco. 


esconda a variável nome * 





Figura 5.6: Bloco para ocultar a variável do cenário. 


e Permite a criação de uma lista de valores, que é um tipo de 
variável multivalorada. 


Criar uma Lista 


Figura 5.7: Botão para criação de listas de valores. 


e Este botão de comando permite a criação de um novo bloco de 
instrução de variáveis. 


Criar um bloco 


Figura 5.8: Botão para criação de blocos de variáveis. 


Para criação de uma nova variável, devemos pressionar o botão 
criar uma variável, então será apresentada uma caixa de diálogo 
onde deverá ser informado o nome que deseja atribuir a ela. Além 
disso, também devemos definir o nível de visibilidade desta variável 
no nosso projeto, ou seja, ela poderá ser manipulada somente por 
um determinado personagem, ou poderá ser tratada por todos os 
personagens presentes no projeto? Após as definições, ao 
confirmarmos sua criação, ela será apresentada na caixa de blocos 
de variáveis de Scratch. Dessa forma já podemos utilizá-la nos 
scripts. 


Quando a variável é criada, uma caixa de seleção ( checkbox ) é 
disposta ao lado esquerdo e, se clicarmos e a selecionarmos, ela 
será apresentada na cena, caso contrário, será omitida. Veja a 
figura que demonstra esta funcionalidade. 


Variáveis 


Pontos DD) 


Criar uma Variável 


adicione Pontos + a Lo) 
mude Pontos + para o 


g 











mostre a variável Pontos + 


esconda a variável Pontos +» 


Criar uma Lista 


Meus Blocos 


Criar um bloco 


Figura 5.9: Variável pontos do jogador sendo apresentada no cenário. 


5.1 Alteração de valores 


Podemos fazer a alteração dos valores contidos em nossas 
variáveis. Para isso, podemos utilizar os blocos adicione .. a OU mude 
.. para, Conforme veremos a seguir: 


e Caso desejarmos adicionar um valor a uma variável, podemos 
usar o bloco adicione, O qual vai somar o valor informado em 
nossa variável. Exemplo: em nosso projeto, temos uma variável 
denominada pontos e, se usarmos o bloco adicione informando 
o valor 10, será adicionado este valor à variável. 


e Também podemos atribuir diretamente o valor de uma variável, 
sem realizar uma operação de soma, para isso basta 


utilizarmos o bloco mude . Exemplo: ao iniciar um novo jogo, ou 
nova fase, se quisermos zerar a pontuação, devemos atribuir 
zero à variável de pontos. 


A seguir, veremos um exemplo que explora o uso de variáveis, onde 
é apresentado na tela um contador de tempo, iniciando em 10 e 
decrescendo a cada 1 segundo, até chegar em 0. A figura mostra o 
conjunto de blocos de instruções que compõem o código do 
programa. 


quando for clicado 


mostre a variável contador * 


adicione contador ~ a 10) 


EM 10 BEGE 


espere (1) seg 
mude contador + para 


+ 


esconda a variável contador + 





Figura 5.10: Uso dos blocos de variáveis para implementação de um contador de tempo. 


Quando o programa inicia sua execução, a variável contador é 
apresentada na cena e seu valor é alterado para 10. Em seguida, é 
criado um bloco de laço para repetição, por 10 vezes, das instruções 
espere por 1 segundo € mude contador , diminuindo uma unidade de seu 


valor. Ao final da execução do programa, a variável contador é 
removida do cenário. 


5.2 Operações aritméticas 


O grupo de blocos operadores traz muitas facilidades para que 
possamos criar projetos que envolvam operações aritméticas, 
envolvendo expressões de soma, subtração, multiplicação ou 
divisão de valores numéricos. Além disso, também podemos realizar 
operações que envolvam o cálculo do resto de operações de 
divisão, arredondamentos de valores fracionados etc. 


Vejamos um projeto que faz uso das operações aritméticas básicas, 
o programa de cálculo da área de um retângulo. Trata-se de uma 
animação, onde o personagem Nano interage, solicitando os valores 
da base e altura de um retângulo que é apresentado no cenário. 
Então, devemos informar os valores numéricos para Nano realizar o 
cálculo e, ao final, o resultado do cálculo é apresentado. 


e Permite a criação de expressões de cálculo de somas. 





Figura 5.11: Bloco operador de soma. 


e Quando precisamos realizar o cálculo da subtração entre 
valores. 





Figura 5.12: Bloco operador de subtração. 


e Bloco usado para elaboração de expressões de cálculo da 
multiplicação. 





Figura 5.13: Bloco operador de multiplicação. 


e Uma expressão de cálculo da divisão de valores numéricos. 





Figura 5.14: Bloco operador de divisão. 


Nesta pequena animação fazemos uso de vários recursos já 
apresentados, tais como: eventos, manipulação de variáveis para 
representação de dados, uso de sensores para guardar valores 
informados, interação através do envio de mensagens pelo 
personagem e realização de cálculos aritméticos. A próxima figura 
ilustra a cena inicial da animação. 


x 


= 
SA 





Figura 5.15: Animação de Nano. 


Agora, vamos ver e analisar os blocos de instruções que realizam a 
animação de Nano — o matemático. A figura apresenta a sequência 
de blocos de instruções que permitem a interação do personagem 
com o usuário. 


quando for clicado 
| 


esconda a variável altura + 
esconda a variável comprimento + 
esconda a variável area + 


pS Qual é a altura do retângulo? Ha 


adicione altura * a resposta 


ps Agora, diga qual é o comprimento do retângulo? AFA 


adicione comprimento * a resposta 


PER Espere, vou calcular... Mel E» segundos 


adicione area * a altura * comprimento 






diga area por O segundos 


Figura 5.16: Blocos de instruções da animação de Nano. 


O primeiro conjunto de blocos de instruções, após o evento de início 
do programa, esconde as variáveis utilizadas na animação no 
cenário: altura, comprimento e área. Logo a seguir, ocorre a primeira 
interação de Nano, onde o personagem pergunta o valor da altura 
do retângulo. Após a resposta, o valor informado é colocado na 
variável altura. 


Continuando o programa, é realizada a próxima interação, quando o 
personagem pergunta o valor do comprimento do retângulo, e o 
valor informado é colocado na variável relacionada. Na sequência, 
Nano informa que vai realizar o cálculo e solicita que aguarde. Então 
o cálculo é realizado pela expressão passada ao bloco adicione, 
finalizando a animação com Nano dizendo qual foi o resultado do 
cálculo. 


O próximo projeto utiliza um bloco para geração de números 
aleatórios, que também está presente no grupo de instruções de 
operadores de Scratch. O funcionamento do bloco é muito simples, 
basta informarmos a faixa de valores válida para geração do 
número, ou seja, informamos o menor e o maior valor possível, 
assim o bloco gera um número inteiro limitado a este intervalo. A 
figura nos mostra o cenário do projeto. 


SORTEIO 
EM ER ER ER ER 


Figura 5.17: Cenário do projeto de sorteio de um número. 


A seguir, vamos analisar e comentar o código para geração do 
número apresentado. A figura apresenta as instruções que formam 
o número gerado no projeto. Note que é apresentada uma animação 
que vai trocando os dígitos que compõem o número por um certo 
período de tempo. Ao término desse tempo, o número é formado e 
apresentado. 


O código do programa contém um bloco que realiza a repetição das 
instruções que geram os números aleatórios por 20 vezes, o que 
permite que tenhamos o efeito de visualização da geração aleatória 
dos dígitos. Então cada dígito que compõe o número é gerado por 


20 vezes até que possamos ter o número final. Note que usamos a 
instrução para adicionar o valor gerado em cada variável que 
compõe o número, indicando o valor para a unidade, dezena, 
centena, unidade de milhar e dezena de milhar. Os valores gerados 
estão limitados ao intervalo que vai de O a 9. Uma pausa de 1 
décimo de segundo é realizada a cada iteração do laço de 
repetição. 


quando for clicado 


repita vezes 
adicione unidade + a número aleatório entre O = O 
adicione dezena * a número aleatório entre O - 9) 


adicione centena v a número aleatório entre 0) e O 
adicione unidade milhar v a número aleatório entre Do] e O 
adicione dezena milhar v a número aleatório entre O e o] 
espere 01) seg 


Sy 





Figura 5.18: Código da animação de sorteio. 


Uma outra funcionalidade que podemos realizar com valores 
numéricos, além de operações aritméticas e geração de valores 
aleatórios, é fazermos arredondamentos com valores. Para isso, 
usamos o bloco arredondamento de , O qual recebe o valor numérico 
com decimais e devolve o valor arredondado, veja a figura a seguir. 


quando for clicado 


adicione valor * a (125) 


adicione valor * a arredondamento de valor 








Figura 5.19: Arredondamento de valores numéricos. 


Vale destacar que o arredondamento pode ser realizado para baixo, 
caso o dígito decimal seja até 4, ou para cima, para dígitos decimais 
de 5 até 9. No exemplo da figura anterior, o valor 12.5 será 
arredondado para cima, resultando em 13. Caso o valor passado 
para o bloco de arredondamento fosse 12.4, o número seria 
arredondado para baixo, resultando em 12. 


Por fim, vamos ver mais um bloco de operações com números, que 
é o resto de uma operação de divisão. Esse vai ser muito útil no 
projeto de uma animação que pede ao usuário para informar um 
número inteiro e, após, o programa informa se o número é par ou 
ímpar. A figura contém o cenário da animação. 





Figura 5.20: Cenário do programa que adivinha se é par ou ímpar. 


A seguir, podemos observar o código correspondente às ações do 
personagem Pico, durante sua interação com o usuário, veja a 
figura. Para construção da animação, usamos somente duas 
fantasias do personagem Pico, as quais foram utilizadas no efeito de 
interação, altemando as imagens apresentadas. 


quando for clicado 


mude para a fantasia pico-b * 





Epa Informe um número inteiro RH | 
= | 








mude para a fantasia pico-a + 


espere La] seg 


mude para a fantasia pico-b + 


resto de resposta por O = 0, então 
PEM O número é par! Nasi eo segundos 


senão 






as O número é impar! Mep & segundos 


Figura 5.21: Código do programa par ou ímpar. 


A interação inicia com a imagem de Pico sorrindo e, na sequência, o 
personagem pede para que seja digitado um número inteiro. Depois, 
a próxima imagem é apresentada e ocorre uma pausa de 1 segundo 
no processamento da animação. Quando a animação é retomada, a 


próxima imagem é apresentada e uma estrutura de tomada de 
decisão é implementada. 


Nesse instante, o personagem precisa decidir o que falar, de acordo 
com a avaliação do número informado. Caso o resto da divisão do 
valor informado por 2 resulte em 0, o número informado é par, visto 
que todo número dividido por dois gera resto zero; caso contrário, o 
número é ímpar. A mensagem adequada é apresentada e a 
animação é finalizada. 


5.3 Operações lógicas 


Os operadores lógicos são utilizados para construção de estruturas 
para tomada de decisão em nossos projetos. O código apresentado 
na figura anterior fez uso do conceito de tomada de decisão para 
descobrir se o número informado é par ou ímpar. Para isso, foi 
utilizado um operador relacional de igualdade, verificando o resto da 
divisão. 


Scratch disponibiliza operadores relacionais para que possamos 
realizar comparações entre valores numéricos, ou informações 
textuais manipuladas pelos nossos projetos. A próxima listagem 
apresenta a lista de blocos de operadores relacionais que podemos 
utilizar para elaboração de estruturas de tomada de decisão nos 
nossos códigos de programa. 


e Operador utilizado para comparar se um determinado valor é 


igual ao outro. 


Figura 5.22: Bloco operador de igualdade. 





e Operador utilizado para comparar se um determinado valor é 


CH» 


maior que outro. 





Figura 5.23: Bloco operador maior que. 


e Operador utilizado para comparar se um determinado valor é 
menor que outro. 





CH» 


Figura 5.24: Bloco operador menor que. 


O projeto Giga, apresentado a seguir, demonstra como utilizar o 
operador de igualdade para fazer comparações entre dados 
textuais. A figura ilustra a interface gráfica do programa. O 
funcionamento ocorre da seguinte forma: o personagem Giga faz 
uma saudação e questiona o usuário sobre o nome do personagem. 


A] 





Figura 5.25: Cenário da animação de Giga. 


O personagem aguarda e, de acordo com a resposta, emite uma 
mensagem informando se a resposta está correta ou não. Veja os 
blocos de código que constituem a lógica de animação da cena na 
próxima figura. 


quando for clicado 






diga Olá!) por O segundos 
pergunte E espere 
resposta = então 
diga por 2) segundos 


EM Humm, esse não é meu nome! Nes E segundos 


Figura 5.26: Blocos de código da animação. 


O próximo projeto faz uso de todos os operadores lógicos 
apresentados: igualdade, maior que e menor que, através de uma 
animação onde somos instigados a adivinhar um valor. Neste 
projeto, o cenário é constituído de uma quadra de basquete, onde o 
personagem Calvrett está sentado próximo de sua bola e pensando 
acerca da eficiência de seus arremessos, buscando identificar a 
distância que se encontra em relação à cesta e a força necessária 
do arremesso para que a jogada seja concluída com sucesso e o 
ponto seja marcado. 


Após refletir muito, Calvrett já descobriu a resposta, mas deseja 
realizar uma brincadeira com você, interagindo através de perguntas 


até que você acerte a distância até o alvo. A figura mostra a 
aparência do cenário, com a cena inicial da animação. 


tentativas 





Figura 5.27: Cenário da animação de adivinhação. 


O código da animação utiliza vários dos conceitos já apresentados, 
tais como: uma estrutura de controle de repetição dos blocos de 
instruções, a tomada de decisão para identificação de ações a 
serem realizadas de acordo com a resposta e uso de variáveis para 
acumular valores. A seguir, vamos analisar o código do projeto a 
partir de seus blocos de construção, ilustrados na figura da 
sequência. 


O programa inicia com o ajuste da fantasia do personagem, visto 
que a imagem inicial a ser apresentada é de Calvrett sentado e 
pensando. Após, é realizada a instrução que atribui o valor da 
variável utilizada para contar o número de tentativas; as duas 
próximas instruções representam o pensamento do personagem, 
refletindo sobre o seu problema, ou seja, como realizar cestas a 
partir do ponto onde se encontra. Então, uma estrutura de repetição 


é criada, para controlar o número de vezes que o conjunto de 
instruções aninhadas serão repetidas. Neste caso, a repetição 
ocorrerá até que o usuário responda à pergunta de forma correta. 


quando for clicado 


mude para a fantasia calvrett thinking w 


adicione tentativas w a O 
CHEE Já sei a distância e a força de meu arremesso para acertar a cesta. Mes ls) segundos 
Mapa Vamos ver se você consegue adivinhar... Mae; 5) segundos 


repita até que resposta 







«EM Ops, quase lá, mas é maior. Mei O segundos 





mude tentativas v para O 


34 


mude para a fantasia calvrett jumping vw 


GLEM Hhahaha, muito bem! Nos; O segundos 





Figura 5.28: Blocos de construção da animação de adivinhação. 


No interior do bloco de repetição temos uma estrutura de tomada de 
decisão, a qual é utilizada no programa para verificar a resposta, e 


tem o seguinte comportamento: 


e caso a resposta seja um valor superior a 10, uma mensagem é 
emitida informando que o valor da distância até o alvo deve ser 
menor, 

e caso contrário, uma nova verificação deve ser realizada, ou 
seja, se o valor informado for inferior a 10, o que faz com que o 
personagem emita a mensagem dizendo que o valor deve ser 
maior. 


Ao final da estrutura, antes que as instruções no interior do laço 
sejam repetidas, é realizado um incremento de 1 unidade na 
variável tentativas. Dessa forma, realizamos um controle de quantas 
vezes o jogador já tentou adivinhar a distância. O número de 
tentativas é apresentado no topo da cena. 


Quando o valor esperado pelo programa for informado, que é o valor 
10 metros, o laço de repetição é finalizado, a fantasia do 
personagem é alterada para a imagem que representa um salto e o 
personagem faz uma saudação. 


5.4 Conectivos lógicos 


Como vimos, a tomada de decisão é uma ação muito presente na 
maioria dos projetos que vamos criar, visto que nossos personagens 
precisam decidir o que fazer, nas mais diversas situações que se 
apresentam ao longo das nossas animações, ou jogos. 


Portanto, os blocos de construção de estruturas de tomada de 
decisão utilizam expressões que realizam a comparação de valores, 
sejam numéricos ou, até mesmo, textos, cujo resultado das 
comparações é sempre sim ou não . Exemplos: o personagem 
atingiu a borda do cenário? A fantasia atual é a 3? A cor do cenário 
é amarelo? Essas respostas obtidas em expressões relacionais 
sempre retomam um valor lógico, representando se a expressão é 


verdadeira OU falsa, O que permite a definição dos blocos de 
instruções a serem realizados pelo programa. 


Entretanto, em algumas situações, a tomada de decisão deve levar 
em conta mais de um fator. Não somente uma expressão deve ser 
avaliada, mas sim, duas ou mais expressões relacionais, ao mesmo 
tempo. Note que uma expressão pode retomar um valor verdadeiro, 
enquanto outra pode retomar um valor falso. De acordo com a 
combinação de expressões relacionais, podemos montar a lógica da 
tomada de decisão em nossos projetos. Para isso, usamos O 
conceito de conectivos lógicos, os quais permitem o agrupamento 
de expressões em uma estrutura de tomada de decisão. São eles: 


e conjunção: permite a criação de uma estrutura de tomada de 
decisão a partirna combinação de expressões relacionais pelo 
uso do conectivo e; 

e disjunção: usado quando desejamos criar uma estrutura de 
tomada de decisão que combina expressões relacionais através 
do conectivo ou; 

e negação: faz a inversão lógica de uma expressão relacional. 


Vejamos como fazer uso dos conectivos lógicos em situações onde 
a tomada de decisão leva em consideração mais fatores. Iniciamos 
pela utilização da conjunção, conetivo lógico e, apresentado no 
programa ilustrado na figura. 





Figura 5.29: Cenário do programa que usa o conectivo lógico "e”. 


O programa apresenta o personagem Dee com um problema a ser 
resolvido. Ele precisa escolher um valor que está no intervalo de 1 a 
5, mas está indeciso a respeito de sua escolha, portanto, solicita 
ajuda para esta decisão. A figura apresenta os blocos de instruções 
utilizados na construção da lógica do programa. 


O código inicia com a saudação de Dee e o personagem dizendo 
que precisa de ajuda para resolver um problema, logo a seguir, uma 
pergunta é realizada e inicia-se uma interação com o usuário, onde 
o programa aguarda como resposta um valor numérico. 


A resposta é avaliada em uma estrutura de tomada de decisão, que 
realiza a combinação de duas expressões relacionais a serem 
avaliadas. A primeira expressão relacional verifica se a resposta é 
um valor numérico maior que 1; já a segunda compara se a resposta 
é um valor numérico menor que 5. Esta combinação de 
comparações é necessária, visto que o valor de resposta deve estar 


no intervalo solicitado por Dee, ou seja, um valor numérico qualquer 
entre 1 e 5. 


quando for clicado 


eE Olá! Meu nome é Dee. Nos 2) segundos 
eE Preciso escolher um número entre 1 e 5. S9 O segundos 
sE Qual valor você escolheria? HT 


resposta > O e resposia < © então 
GLEW Ótimo, este valor é perfeito, está no intervalo. Mata Es segundos 


sE Poderia informar outro valor? Pois este é inválido. Mec: (2) segundos 















Figura 5.30: A estrutura lógica do conectivo "e". 


De acordo com a resposta, o personagem precisa decidir que ação 
tomará: informar que o valor está de acordo, ou dizer que o valor 
não será aceito por não estar no intervalo válido informado. 


Veja que poderíamos construir a estrutura de tomada de decisão de 
uma outra forma, usando-se o conectivo lógico ou no lugar de e. 
Entretanto, esta opção modifica a lógica de construção da tomada 
de decisão. A figura ilustra a modificação do código, introduzindo o 
conectivo da disjunção. 


Veja que há uma inversão das falas do personagem. Agora, quando 
a resposta for menor que o valor mínimo, neste caso 1, ou a 
resposta extrapolar o valor máximo esperado, que é o valor 5, o 


personagem pede para o usuário informar outro valor, caso 
contrário, ele informa que o valor está de acordo com o esperado. 


quando for clicado 


GLER Olá! Meu nome é Dee. Nic £ segundos 
GLER Preciso escolher um número entre 1 e 5. Mes E: segundos 
mapeia Qual valor você escolheria? HE 


resposia < O ou resposta > O 
«EM Poderia informar outro valor? Pois este é inválido. Mes: (2) segundos 


diga Ótimo, este valor é perfeito, está no intervalo. Nes és segundos 























Figura 5.31: A estrutura lógica do conectivo "ou". 


Por fim, vamos analisar o uso do conectivo da negação, o qual 
permite a construção de uma expressão relacional pela inversão 
lógica. O código apresentado na figura seguinte faz uso de uma 
estrutura de repetição que realiza a mesma animação apresentada 
nos exemplos anteriores. A diferença está no fato de que o 
personagem fica interagindo com o usuário por tempo 
indeterminado. A condição para encerramento do programa é que o 
usuário informe que não deseja mais digitar um valor. 







quando for clicado 


LER Olá! Meu nome é Dee. Nos 2) segundos 
+PER Preciso escolher um número entre 1 e 5. Nos G segundos 


sempre 


mf Tm Qual valor você escolheria? KAHE 
resposia > O e resposia < O então 








então 


pare todos v 


Figura 5.32: A estrutura lógica do conectivo "não". 


O conectivo lógico da negação é utilizado na estrutura de tomada de 
decisão para verificação da resposta. Se a resposta for afirmativa, a 
execução do programa é encerrada, caso contrário, os blocos de 


instruções são repetidos, desde o ponto onde a pergunta inicial 
sobre qual valor o usuário escolheria é apresentada. 


5.5 Operações com textos 


No grupo de blocos de instruções de operadores temos algumas 
operações que podemos utilizar para manipulação de textos em 


nossos programas. As operações sobre textos são muito úteis, pois 


permitem que recuperemos informações acerca de um texto 


qualquer, por exemplo: se um texto contém uma determinada letra, 
ou palavra, o número de caracteres em um texto etc. Os blocos que 


permitem operações sobre textos são: 


e junte... com: esta operação permite a junção de duas porções 
de texto, formando uma única frase. Trata-se de uma operação 
muito útil, pois podemos juntar o valor contido em uma variável 
com uma frase emitida por um personagem. 

letra ... de: outra operação interessante, pois com ela podemos 
extrair uma determinada letra de um texto, dada a posição onde 
se encontra no texto. 

tamanho de ...: operação usada quando desejamos verificar o 
número de caracteres que um determinado texto contém. Um 
ponto importante a ser destacado acerca desta operação é que 
o número de caracteres retomado inclui os espaços em branco 
digitados no texto. 

contém ... : podemos utilizar esta operação quando precisamos 
verificar se um determinado texto contém uma palavra, ou 
expressão qualquer. 


A seguir, vamos apresentar um exemplo de utilização dos blocos de 
manipulação de textos. O projeto envolve uma narrativa, onde a 


personagem Avery interage, fazendo uma brincadeira de 
adivinhação. Veja a figura que ilustra o cenário do projeto. 





Figura 5.33: Cenário do programa de adivinhação. 


A personagem é apresentada em frente à escola onde estuda e 
começa um diálogo com o usuário. De acordo com as respostas às 
indagações de Avery, a dinâmica da brincadeira é realizada, pois 
Avery interage dizendo algumas informações sobre os textos 
digitados. Na próxima figura podemos observar a estrutura dos 
blocos de instruções que formam o código do programa. 







quando for clicado 


MICA Olá, qual é o seu nome? WA 
CPEE TA Legal, o número de letras do seu nome é Meme A ol CN o Ey segundos 


EMO E a primeira letra do seu nome é MANSO é de resposta por E segundos 


[EA Vamos fazer um jogo de adivinhação? Mess O segundos 
E Vou pensar em uma fruta e você terá que adivinhá-la. Mus £ segundos 


sempre 


ge Him Qual é a fruta? HENO 
se resposta = então 
GLEE Parabéns, você acertou. Meg O segundos 


pare todos v» 









senão 


HEM Hummm... vamos tentar novamente! Meg O segundos 


Figura 5.34: Instruções do programa de adivinhação. 


O programa inicia com a saudação de Avery e a pergunta qual é o 
nome. O valor informado é guardado na variável resposta, sobre a 
qual serão realizadas algumas operações textuais, cujos resultados 
são usados pela personagem durante sua interação. 


Na próxima fala, a personagem utiliza duas operações sobre textos, 
a operação junte com € A tamanho de . Note que podemos combinar 
duas operações para obtermos o resultado desejado. Neste caso, o 
resultado obtido pela operação tamanho de é repassado para a 
operação junte com, Visto que desejamos juntar o texto: legal, o 


número de letras do seu nome é, COM O Número de caracteres que 
foram digitados, quando a personagem perguntou seu nome, 
lembrando que este valor ficou armazenado na variável denominada 


resposta. 


Portanto, a variável resposta é passada para a operação tamanho de, 
que verifica o número de caracteres digitados e devolve para a 
operação junte com. Então, a personagem emite a fala contendo o 
resultado da combinação das duas operações sobre textos por 3 
segundos. 


Na fala seguinte, Avery realiza outra brincadeira, dizendo qual é a 
primeira letra de seu nome. Para isso, mais uma vez usamos o 
bloco junte com, visto que desejamos compor uma frase e combiná- 
la com o resultado de uma outra operação sobre textos. A operação 
que usamos aqui foi a letra de, a qual retoma a letra do texto que 
está na posição informada. Neste caso, queremos retomar somente 
a primeira letra do seu nome e juntá-la com o texto: e a primeira 
letra do seu nome é . À personagem realiza a fala por mais 3 
segundos. 


Na sequência do programa, realiza mais duas falas informativas por 
3 segundos. Na primeira, ela pergunta se você quer fazer um jogo 
de adivinhação e, em seguida, diz que vai pensar em uma fruta e 
quer que ela seja adivinhada. 


5.6 Listas de valores 


Determinados projetos envolvem a manipulação de um conjunto ou 
lista de valores e não somente variáveis isoladas, como vimos até o 
momento. Listas representam muitas coisas úteis, tais como: itens 
de um personagem no jogo, lista de fases do jogo, lista de ações do 
personagem na animação etc. 


ra 





Dono OR Sono bio RO EM 


Figura 5.35: Uma lista de itens. 


Cada elemento de uma lista ocupa uma posição nela, sendo que a 
primeira posição de uma lista é identificada pelo valor 1 e as 
próximas posições seguem uma sequência numérica adicionada de 
uma unidade. Quando uma lista está vazia, não possui posições 
predefinidas e, ao adicionarmos um novo elemento, a posição é 
alocada automaticamente, neste caso, será alocada a posição 1 
para armazenar o elemento. A cada elemento adicional será 
alocada a próxima posição da sequência. No exemplo apresentado 
será alocada a posição 2, e assim sucessivamente a cada nova 
inserção de elemento. 


Entretanto, há a possibilidade de inserirmos um novo elemento em 
uma posição já ocupada na lista. Digamos que queremos inserir um 
novo elemento na posição 1 da lista, então devemos informar esta 
posição no momento da inserção e os demais elementos serão 
deslocados uma posição acima. 


Outra operação comum com listas de objetos é a alteração do 
elemento que está em uma determinada posição. Para isso, 
devemos informar qual o novo elemento e qual posição ele vai 
ocupar, fazendo com que o elemento original seja substituído pelo 
novo valor. 


Há a possibilidade de removermos um determinado elemento da 
lista. Basta informarmos qual posição o elemento ocupa no 
momento da exclusão. Também podemos remover todos os 
elementos da lista, fazendo com que ela volte a ficar vazia. 


Um conjunto de objetos forma uma lista em Scratch, que podemos 
criar usando um bloco específico para isso. O botão para criação de 
listas está no mesmo grupo de blocos de variáveis. Veja a listagem, 
que apresenta os blocos para manipulação de listas. 


e Botão utilizado para criação de uma nova lista. 


Criar uma Lista 


Figura 5.36: Botão de criação de listas. 


e Usamos este bloco quando desejamos inserir um elemento na 
lista informada. 


epa E coisa EE 





Figura 5.37: Bloco de inserção de itens. 


e Este bloco permite a eliminação de um elemento da lista, de 
acordo com o valor informado, o qual representa a posição que 
o elemento ocupa na lista. 


apague 0 de frutas + 





Figura 5.38: Bloco de eliminação de itens. 


e Este bloco deve ser utilizado quando desejamos eliminar todos 
os elementos da lista de uma única vez, ou seja, serve para 
esvaziarmos uma lista. 


apague todos os itens de frutas * 





Figura 5.39: Bloco para esvaziar a lista. 


e O bloco permite a inserção de um elemento na posição 
informada. 



































insira Ó na posição O de E 


Figura 5.40: Bloco de inserção de item na posição informada. 


e Com o uso deste bloco, podemos alterar o valor de um item 
presente em uma lista pelo novo valor informado, de acordo 
com a posição que o elemento ocupa na lista. 


substitua o item de frutas ~ por (1) 





Figura 5.41: Bloco para substituição de itens. 


e O uso deste bloco faz com que Scratch retome o elemento que 
se encontra na posição informada. 





tem O de frutas * 


Figura 5.42: Bloco para retomar um item. 


e Vamos usar este bloco quando desejamos verificar em qual 
posição se encontra determinado elemento. 





CA coisa Mumain e 


Figura 5.43: Bloco de busca de um item. 


e Bloco utilizado para retomar o número de elementos contidos 
em uma lista. 


tamanho de frutas * 





Figura 5.44: Bloco que informa o número de itens. 


e Este bloco é utilizado para verificarmos se um determinado 
elemento está ou não presente em uma lista. 


ME EA coisa ME 





Figura 5.45: Bloco para avaliar a presença de um item. 


e Mostra a lista no palco. 


mostre a lista frutas * 





Figura 5.46: Bloco para mostrar a lista. 


e Esconde a lista no palco. 





esconda a lista frutas * 





Figura 5.47: Bloco para esconder a lista. 


5.7 Operações básicas com listas 


Vamos explorar os blocos de ações sobre listas de objetos, onde 
aplicaremos um exemplo para criação de uma lista, inclusão, 
alteração e exclusão de elementos. Também veremos como mostrar 
um determinado elemento, dada sua posição na lista, como conferir 
se um determinado elemento está presente e como verificar o 
tamanho e esvaziar a lista. A figura apresenta o código de criação 
de uma lista de frutas e sua apresentação no palco. 


frutas 
1 Mile 
2 EUERE quando for clicado 
3 BEERE 
pie = Abacate MEMES 
4 RUCE 


5 Melancia Eni Ameixa METER 





6 Mole 


+ Comprimento = Elie Banana MEMES 
6 


clee Morango EUA 


relief = Melancia MEU ed 


Eliete Pêssego ERES 





Figura 5.48: Uma lista de itens. 


Após a criação da lista, codificamos as ações do programa, onde o 
bloco para adição de um elemento é utilizado para inserirmos seis 
elementos que representam frutas. O nome da lista é "frutas", como 
podemos observar. 


Agora vamos realizar duas operações: a exclusão de um elemento 
que será realizada sempre que a tecla e do teclado for pressionada 
(excluir) e a operação de inclusão de um novo elemento, que 
ocorrerá quando for pressionada a tecla a (adicionar). Note que a 
operação de exclusão sempre vai remover o primeiro elemento da 
lista, e que após sua realização a lista será atualizada no cenário. Já 
a operação de inclusão vai adicionar a nova fruta sempre no final da 
lista. A próxima figura ilustra os códigos das duas operações. 






quando a tecla a w for pressionada 


ge Tim Qual fruta deseja adicionar na lista? REIS 


adicione | resposta a frutas v» 


quando atecla e w for pressionada 


apague & de frutas w 





Figura 5.49: Códigos de inclusão e exclusão de elementos. 


A operação de exclusão usa o bloco apague , passando-se como 
parâmetro a posição do elemento que será removido, ou seja, 
sempre o primeiro elemento da lista de frutas. A operação de 
exclusão será disparada em resposta ao evento quando a tecla e for 


pressionada . 


A resposta ao evento quando a tecla a for pressionada é à realização 
de uma pergunta, solicitando o nome da fruta a ser inserida na lista. 
Após a digitação, o conteúdo da resposta é adicionado como um 
novo elemento na lista de frutas. A figura demonstra o cenário em 
que o usuário está interagindo com o programa para inserção de 
uma nova fruta na lista. 


frutas 
1 
2 
3 
4 
5 
6 


+Comprimento= 
6 


Qual fruta deseja adicionar na lista? 





Figura 5.50: Inserção de uma nova fruta na lista. 


5.8 Exemplos de uso de listas 


O primeiro exemplo envolve uma animação, cuja narrativa 
apresenta a personagem Abby manipulando uma lista de frutas, 
onde o usuário interage com o programa através do disparo de 
eventos a partir do pressionamento de alguma tecla. Na próxima 
figura, podemos observar o cenário do programa. Os eventos 
coordenam as ações desejadas, que são: 


e adicionar: evento gerado pelo pressionamento da tecla a, 
realizando as instruções para inserção de uma nova fruta na 
lista; 


e excluir: ocorre quando a tecla e for pressionada, fazendo com 
que as instruções para remoção de um elemento da lista sejam 
executadas; 

e perguntar: permite perguntar a Abby se uma determinada fruta 
está presente na lista e ocorre quando a tecla p é pressionada; 

e limpar: quando a tecla 1 for pressionada a personagem 
informa que a lista de frutas será esvaziada; 

e finalizar: ação decorrente do pressionamento da tecla +, que 
faz com que o programa seja encerrado. 













frutas Oi, pressione: (a) 
adicionar, (e) excluir ou (1) 
para limpar a lista. 
Também vocé pode (p) 
perguntar e (f) finalizar o 


programa. 


GD a bh Qu N 


+ Comprimento = 


eo 


Figura 5.51: Cenário da animação de Abby e a lista de frutas. 


O programa inicia com Abby preenchendo a lista com algumas 
frutas: abacate, ameixa, banana, morango, melancia e pêssego, 
conforme apresentado na figura, então a lista é apresentada no 
cenário. Logo a seguir, uma mensagem é enviada ao ambiente de 


execução do programa: pergunte . À mensagem é utilizada como um 
mecanismo de sincronização dos eventos, pois permite 
controlarmos o momento em que Abby deve perguntar a opção 
desejada. Isso ocorre sempre que uma operação for finalizada, seja 
a adição, exclusão, pergunta ou quando resolvemos limpar a lista. 





apague todos os itens de frutas + 
adicione | bacate | a frutas + 
ca Ameixa FUE 
adicione 


adicione | 


Epp Melancia EEE 


laa Péssego EE 








Figura 5.52: Início da animacáo da lista de frutas de Abby. 


Veja que usamos o bloco para apagar a lista antes de dar início ao 
programa e depois a instrução para adição de um elemento é 
utilizada para inserção de algumas frutas. Ao finalizar o conjunto de 
instruções, a mensagem pergunte é enviada ao ambiente de 
execução do programa, a qual é interceptada pelo evento quando eu 
receber , apresentado na figura. 


quando eu receber pergunte v 









GLER Oi, pressione: (a) adicionar, (e) excluir ou (1) para limpar a lista. Também você pode (p) perguntar e (f) finalizar o programa. 


por [30 ) segundos 


Figura 5.53: Abby pergunta ao usuário qual a opção desejada. 


Quando ocorrer o recebimento da mensagem pergunte, Abby 


sempre vai perguntar qual a opção desejada. Essa é a técnica que 
utilizamos para sincronização dos eventos. 


O próximo código, apresentado na figura a seguir, descreve as 


instruções associadas ao processo de adição de um novo elemento 
na lista. 


quando a tecla a * for pressionada 


Ros Qual fruta deseja adicionar na lista? Esse 


adicione resposta a frutas + 


transmita pergunte * 





Figura 5.54: Adição de uma nova fruta na lista. 


No momento em que for pressionada a tecla a, uma pergunta é 
apresentada, solicitando o nome da fruta que será adicionada na 
lista. A resposta entra como um novo item no final da lista de frutas 
e a mensagem pergunte é propagada ao ambiente de execução do 
programa, disparando novamente a rotina de solicitação da opção 
desejada. 


O código presente na figura demonstra como ocorre a exclusão de 
um elemento da lista. 


quando a tecla e + for pressionada 





Ep Qual fruta deseja excluir da lista? Ha 
frutas + contém resposta ? emo 


apague ifemfde resposta em frutas * de 


transmita pergunte Y 


Figura 5.55: Exclusão de uma fruta da lista. 


Em resposta ao evento de pressionamento da tecla e a 
personagem Abby pergunta qual a fruta que será excluída da lista e 
aguarda a resposta. A resposta é avaliada em uma estrutura de 
tomada de decisão, onde é verificado se a fruta informada está 
presente ou não na lista. Em caso afirmativo, o programa remove o 
elemento da lista, mas para isso precisa descobrir a posição que o 
elemento ocupa. 


Veja que usamos um encadeamento de blocos de instruções, onde 
o resultado da execução de um bloco serve como dado de entrada 
para outro. Foi o que aconteceu com os blocos item tt de € apague, 
primeiro descobrimos a posição que o elemento ocupa na lista, e o 
resultado é repassado para operação que vai realizar a ação de 
exclusão. Por fim, novamente a mensagem pergunte é propagada. 
O próximo evento a ser apresentado descreve as instruções que 
fazem Abby verificar se uma determinada fruta está presente na 
lista, veja a próxima figura. 


quando a tecla p+ for pressionada 


Apt Qual fruta deseja verificar se existe na lista? 


frutas + contém | resposta 


transmita pergunte * 





Figura 5.56: Abby verifica se a fruta informada está na lista. 


Para questionar Abby a respeito de alguma fruta da lista, deve-se 
pressionar a tecla p, o que faz com que seja disparado o código de 
tratamento do evento que inicia com a personagem questionando 


sobre qual fruta deseja verificar se está presente. A resposta será 
avaliada em uma estrutura de tomada de decisão que, em caso 
afirmativo, faz com que Abby confirme a presença da fruta na lista e, 
em caso negativo, informa que a fruta não está presente na lista, 
finalizando com o envio da mensagem pergunte. 


Como vimos, também é possível pedir a Abby para limpar a lista, 
ação que removerá todos os itens contidos. Para isso, deverá ser 
pressionada a tecla 1 e o código presente na figura será executado. 


quando a tecla | + for pressionada 


DEM À lista de frutas será esvaziada. 


apague todos os itens de frutas * 


transmita pergunte * 





Figura 5.57: Exclusão de todos os elementos da lista. 


O código inicia com a personagem informando que a lista de frutas 
será esvaziada, em resposta ao evento de pressionamento da tecla 
1. Após 2 segundos, o bloco de eliminação dos itens será 
executado e a lista será apresentada vazia no cenário, encerrando a 
rotina com o envio da mensagem pergunte . Por fim, temos o código 
para encerramento do programa, ilustrado na figura. 


quando atecla f+ for pressionada 


"HES Programa finalizado! May O segundos 


pare todos * 





Figura 5.58: Finalização do programa. 


O encerramento do programa ocorre quando a tecla + for 
pressionada, desencadeando o bloco de instruções relacionadas ao 
evento. Ele inicia com Abby dizendo que o programa será finalizado, 
então todos os scripts de código são interrompidos, fazendo com 
que a execução chegue ao fim. 


A seguir, utilizaremos como base o exemplo da lista de frutas de 
Abby para elaboração de uma nova versão da animação. Ela 
apresenta a lista de frutas no cenário e uma seta que percorre a lista 
do início ao fim. À medida que vamos percorrendo a lista, algumas 
informações a respeito dela são apresentadas, tais como: o 
tamanho, ou seja, número de elementos contidos na lista, a fruta 
que se encontra na posição atual da seta e a posição atual 
apontada pela seta. Veja a figura que ilustra o cenário do programa. 


frutas 


Tamanho da lista de frutas EL 


1 Ri de 
> (A Fruta na posição atual 
3 REE Posição atual DD) 


4 Morango 


5 RAEE 





6 Ele 


+ Comprimento = 
6 


Figura 5.59: Animacáo lista de frutas. 


Neste exemplo, as instruções que compõem a animação estão 
distribuídas no personagem que representa a seta e o próprio 
cenário do programa. Iniciamos a explanação pelo comportamento 
da seta, o qual é um simples movimento de descida, da posição 
onde se encontra apontando para a primeira fruta da lista, no 
sentido vertical, até a posição onde se encontra a última fruta da 
lista. Veja a figura mais adiante, que mostra a aparência do código. 


quando for clicado 


vá para X: y: 
repita O veres 


adicione ay 
espere 3) seu 


+ 





Figura 5.60: Código de animacáo da seta. 


Quando o projeto for executado, a seta é posicionada no palco, 
fazendo com que aponte para a primeira fruta no topo da lista. Em 
seguida, é criado um bloco de controle de repeticáo, onde as 
instruções aninhadas serão repetidas por 6 vezes, que representam 
o número de frutas presentes na lista. A cada repetição é adicionado 
um valor na coordenada Y da seta, fazendo com que seja realizado 
o movimento de descida pelo palco, então são aguardados 3 
segundos até que a instrução seja realizada novamente. 


A próxima ilustração apresenta o comportamento de modificação 
dos valores contidos nas variáveis manipuladas pelo programa, 
conforme ocorre o movimento de reposicionamento da seta em 


relação aos itens contidos na lista. O código deverá estar 
relacionado ao palco e não a seta, para isso deve-se clicar no palco 
antes de construir a sequência de blocos. 


quando for clicado 


apague todos os itens de 


adicione 


adicione 


adicione 


adicione 


adicione a frutas ¥ 


adicione Tamanho da lista de futas ~ a tamanho de frutas * 
adicione Posição atual + a O 
repita até que Posição atual > famanho de frutas + 


adicione Fruta na posição atual * a item Posição atual de frutas + 


ESpPere O 5 


mude Posição atual + para 1) 


adicione Posição atual | a a] 





Figura 5.61: Código de animação das variáveis presentes no cenário. 


O script inicia com a preparação do estado inicial da lista de frutas. 
Primeiramente, a lista é esvaziada para que seja preenchida com 


algumas frutas, no início da execução do programa. Na sequência, 
os valores das variáveis são ajustados para serem apresentados na 
cena, iniciando pela variável tamanho da lista de frutas, na qual é 
associado o valor obtido pela instrução que retoma o número de 
elementos da lista, a instrução tamanho de . Outra variável ajustada é 
a posição atual, que indica para qual elemento a seta está 
apontando no momento. Como é início de execução do programa, o 
valor inicial da variável é 1, pois representa o primeiro elemento da 
lista. 


Uma estrutura de repetição é inserida no código, a qual vai controlar 
o número de vezes que o programa mostrará uma fruta na cena. 
Esse número de vezes vai depender do número de frutas contidas 
na lista, obtido pela instrução tamanho de frutas . Dessa forma, a 
condição de repetição é estabelecida por uma relação entre duas 
variáveis: posição atual € tamanho de frutas , OU seja, enquanto O 
valor da variável posição atual for menor que o número de 
elementos contidos na lista de frutas, as instruções no interior da 
estrutura são repetidas. 


Assim, o programa coloca na variável fruta na posição atual O item 
da lista de frutas que se encontra na posição dada pela variável 
posição atual . Isso é obtido pela instrução item de que retoma o 
elemento contido na lista, dada a posição informada. Então, ocorre 
uma pausa de 3 segundos no processamento das instruções, para 
causar um efeito de animação no projeto e a variável posição atual é 
incrementada em uma unidade. 


O incremento da variável que guarda a posição apontada pela seta 
é muito importante, pois com base no valor desta variável é que o 
controle da repetição é realizado; se não fosse colocada esta 
instrução no código, a repetição seria realizada de forma infinita. Ao 
término da execução do script, a variável posição atual é ajustada 
para 6, visto que representa o número máximo de elementos da 
lista. 


Resumo do capítulo 


Neste capítulo foram abordados aspectos relacionados à 
manipulação de dados em projetos construídos em Scratch. 
Portanto, vimos como representar valores numéricos e textos em 
nossos programas. Os valores numéricos são importantes para 
situações onde precisamos controlar pontuação, fases e demais 
elementos de um jogo, assim como dados textuais, os quais 
representam nome de personagem, fantasias etc. 


Também vimos como realizar operações aritméticas e lógicas sobre 
dados em nossos programas, onde podemos comparar valores, 
realizar operações de soma, subtração, multiplicação e divisão. 
Vimos algumas operações especiais sobre dados do tipo texto, tais 
como: verificar o número de caracteres e ocorrência de uma 
expressão em um texto. 


Ao final do capítulo, reservamos um espaço para explorarmos o 
conceito de listas, apresentando como utilizá-las, através de 
exemplos práticos e ilustrativos. Como isso, realizamos as principais 
operações suportadas em listas, como: inclusão, alteração e busca 
de elementos. 


5.9 Exercícios 


5.1) Como faço para atribuir um valor a uma variável? E para 
somar um determinado valor a variável? 


5.2) Elabore um projeto em Scratch onde um personagem 
interage com você fazendo algumas perguntas. De acordo com 
as respostas, o personagem realiza alguma fala. 


5.3) Escreva um projeto onde um personagem pergunta de qual 
cor ele mais gosta. O programa deve comparar com a cor de 
que o personagem mais gosta, caso seja a mesma, o 
personagem deve dizer a você. 


5.4) Usando-se do mesmo projeto do exercício anterior, faça 
com que o personagem pergunte o ano em que você nasceu, 
após o personagem deve fazer o cálculo e mostrar a idade, de 
acordo com o ano atual, desprezando-se frações de meses. 


5.5) Escreva um projeto que utilize uma lista de valores 
correspondentes a itens de compra e faça: 


a) Insira a imagem urban de fundo do cenário. 
b) Insira o personagem abby na cena. 


c) Escreva o script de código do evento quando a bandeira for clicada 
para a personagem Abby e insira uma estrutura de repetição, 
fazendo com que a personagem Abby pergunte qual item deve ser 
comprado no mercado. A personagem vai perguntar por 10 itens. 


d) Cada item informado deve ser colocado em uma lista. 
e) Mostre a lista na cena. 


5.6) Faça as seguintes alterações no projeto do exercício 
anterior: 


a) Insira um botão de comando denominado excluir. 


b) A imagem do botão pode ser desenhada por você, ou obtida da 
galeria. 


c) Quando o botão for clicada, devemos executar o script associado, 
o qual vai fazer com que Abby pergunte qual item deve ser excluído 
da lista. 


d) Após o item ser digitado, ele deve ser removido da lista. 


Os códigos dos exercícios podem ser obtidos em: 
5.2 Perguntas e respostas: 
https://scratch.mit.edu/projects/442186759/ 

5.3 € 5.4 Qual é a cor e idade: 
https://scratch.mit.edu/projects/442193712/ 

5.4 5.5 e 5.6 Lista de compras: 


https://scratch.mit.edu/projects/442200799/ 





CAPÍTULO 6 
Controle de personagens 


Neste capítulo, vamos explorar um pouco mais acerca de blocos 
que permitem a interceptação de eventos, tais como o 
pressionamento de teclas a partir do teclado. Com isso, podemos 
introduzir o controle sobre o deslocamento de personagens na área 
do palco, o que é uma ação necessária para a elaboração de rotinas 
que implementam a lógica de movimentação. 


Além disso, também veremos como gerar cópias de um elemento 
gráfico ao longo da execução de um projeto. Este recurso nos 
permitirá criar personagens que atuam como inimigos em um jogo, 
por exemplo. 


E ao final do capítulo vamos utilizar um recurso muito útil durante a 
construção de nossos projetos, que é a possibilidade de criação de 
nossos próprios blocos de código. Os blocos de código criados pelo 
programador ou programadora permitem o agrupamento de um 
conjunto de instruções em um único bloco, possibilitando o 
reaproveitamento de código e reduzindo o tamanho dos scripts. 


Para ilustrar como podemos utilizar os conceitos de controle dos 
movimentos de um personagem, criação de cópias de personagens 
em tempo de execução dos nossos projetos e a criação de novos 
blocos de código, vamos utilizar um exemplo prático através de uma 
animação denominada Ninja. Os personagens da animação podem 
ser obtidos no site: Game Art 2d 
(https://wnww.gameart2d.com/freebies.htm!l), sob a licença Creative 
Common Zero (CCO), de domínio público. 


A narrativa da animação apresenta o personagem ninja no palco, 
cujo tema é uma floresta, onde o personagem pode correr e saltar 
na cena para desviar de fantasmas que insistem em atacá-lo. Ao 
iniciar o programa, o ninja é apresentado no canto inferior esquerdo 


do palco e o jogador pode movimentá-lo somente em direção à 
outra extremidade, ou seja, da esquerda para a direita do palco. 
Para movimentar o personagem devemos pressionar a tecla de seta 
para a direita e ao longo da trajetória, pode pressionar a seta para 
cima, o que fará com que o personagem dê um salto, ou a tecla 
para baixo, fazendo com que o personagem se abaixe. 


Durante a execução do programa alguns fantasmas surgem na 
extremidade da direita do palco e realizam um deslocamento 
horizontal em direção à extremidade contrária. Durante este 
deslocamento, o ninja deverá realizar saltos, ou abaixar, visando se 
esquivar dos fantasmas. Caso algum fantasma colida com o ninja a 
animação é encerrada. 





Figura 6.1: Cenário da animação ninja. 


Esse projeto ilustra como podemos controlar a movimentação dos 
personagens e ações que devem ser tomadas em resposta a 
eventos gerados a partir do pressionamento de teclas. Apesar de 
simples, podemos ver como alguns conceitos funcionam na prática. 


A figura apresenta o cenário da animação. A seguir, as próximas 
seções descrevem cada um dos conceitos envolvidos na construção 
do código. 


6.1 Ações do personagem 


O personagem ninja realiza três ações, conforme a tecla de direção 
pressionada pelo jogador: 


e correr: esta ação envolve uma animação que simula a corrida 
do ninja, a qual é realizada quando a tecla de seta para a direita 
for pressionada; 

e pular: ação realizada quando o jogador pressiona a tecla de 
seta para cima, fazendo com que a animação correspondente 
seja realizada; 

e abaixar: esta é a animação mais simples, apresenta o 
personagem em uma posição de desvio do fantasma, fazendo 
com que fique abaixado na cena, sendo desencadeada quando 
a tecla de seta para baixo é pressionada. 


A próxima figura ilustra o script de controle das ações de 
movimentação do personagem. 


quando for clicado 


mude para a fantasia 1 * 


vá para x: Y: [-87) 


sempre 


i E 
seta para cima + pressionada? | então | 


seta direita ~ pressionada? | então 


seta para baixo * pressionada? |. então 


+ 





Figura 6.2: Script de controle do movimento do personagem. 


O script inicia com a apresentação do personagem na cena com sua 
primeira fantasia, parado, em pé, no canto inferior esquerdo. O 
posicionamento inicial do personagem é realizado pelo bloco de 
instrução vá para, conforme podemos observar na ilustração. Logo 
em seguida, um bloco de repetição indeterminada é criado, para que 
seja realizado o monitoramento do pressionamento de teclas, o que 
desencadeará cada ação associada às teclas de direcionamento. 


Note algo peculiar nesse código, que é a presença de novas 
instruções: pular, correr € abaixar . Essas não são instruções 
padrão da linguagem Scratch, ou seja, tratam-se de instruções 
criadas pelo próprio programador. Mais adiante, teremos uma seção 
específica sobre como criar novos blocos de instruções. A próxima 
seção aborda a criação de cópias de personagens, o que é 
denominado de clone na linguagem Scratch. 


6.2 Criação de clones 


No projeto de animação do ninja usamos a aplicação do conceito de 
clones para criação de cópia de um personagem durante a 
execução do programa. Isso foi realizado para que cópias dos 
fantasmas, que são os inimigos do ninja, sejam criadas a cada 
parcela de tempo, fazendo com que o ninja seja atacado 
constantemente pelas investidas dos fantasmas. A figura seguinte 
apresenta o cenário com os fantasmas realizando seu ataque ao 
personagem ninja. 





Figura 6.3: Fantasmas atacando o ninja. 


A geração de clones é realizada com o bloco denominado crie clone 
de , O qual está disponível no grupo de blocos de controle do 
ambiente de programação de Scratch. A figura apresenta o script 
que realiza a criação de cópias dos fantasmas. 


Os fantasmas que servem como matriz para a criação dos clones 
são posicionados na tela e tomados invisíveis, pois são somente 
seus clones que são apresentados quando criados. Eles são 
posicionados na extremidade esquerda do palco. 


quando for clicado 


sempre 


espere É seg 


crie clone de este ator + 





Figura 6.4: Script de criação do fantasma. 


Este código representa a criação do fantasma apresentado no nível 
mais acima da cena, começando com seu posicionamento nas 
coordenadas de tela indicadas como parâmetro no bloco de código 
vá para . Dando continuidade, um bloco de repetição é inserido para 
que a criação do clone seja realizada a cada 5 segundos. 


Note que o script tem a única finalidade de gerar clones do fantasma 
por tempo indeterminado, desde o momento em que a execução do 
programa é disparada. O controle da ação do fantasma é realizado 
por outro script, o qual é disparado quando o evento quando eu 
começar como um clone for encadeado. A figura apresenta o código de 
controle da ação do fantasma. 


quando eu começar como um clone 
mostre 


sempre 


mude O para x | 
ES 0.001 ME 


se tocando em borda + 7 
esconda 


apague este clone 


tocando em ninja ~  ? entao 


pl Você já era! Nus E segundos 


pare todos + 


7 





Figura 6.5: Script de controle da ação do fantasma. 


O código inicia com a utilização do bloco que permite que o 
personagem seja apresentado na cena. Então, uma estrutura de 
repetição indeterminada é inserida para realizar o comportamento 
de deslocamento do fantasma em direção ao ninja. O deslocamento 
é realizado através do incremento da coordenada x a cada fração 
de segundos. Entretanto, algumas tomadas de decisão devem ser 
realizadas a cada vez que o fantasma se deslocar pela cena. 


Primeiro, verifica-se se o fantasma já atingiu a borda, pois em caso 
afirmativo devemos eliminar o clone da cena. Esta ação é realizada 
em duas etapas: o personagem é escondido e depois apagado da 
cena. 


A outra verificação necessária é se o fantasma atingiu o ninja 
enquanto realizava seu deslocamento, pois essa é a condição de 
finalização do programa. Quando qualquer um dos dois fantasmas 
da cena atingir o ninja, é enviada a informação de que o ninja já era, 
então todos os scripts do programa são interrompidos, sinalizando a 
finalização da execução do projeto. 


O controle de criação de novos clones do fantasma que fica mais na 
base do cenário tem um comportamento semelhante, as únicas 
diferenças estão nas coordenadas de posicionamento na tela eno 
intervalo de tempo utilizado para a criação da cópia. 


6.3 Criação de novos blocos 


O recurso de criação de blocos permite expandir as funcionalidades 
da linguagem Scratch, criando-se novos blocos que realizem um 
conjunto de instruções predefinidas pela pessoa programadora. 


Nesta seção, veremos como criar nossos próprios blocos de 
instruções, os quais serão utilizados na animação ninja para 


realização dos movimentos do personagem. Como vimos, no código 
de controle dos movimentos do personagem ninja, quando as setas 
de direção no teclado forem pressionadas, o personagem responde 
com os movimentos: correr, abaixar OU pular. 


Cada movimento mencionado foi elaborado a partir de um novo 
bloco de instrução, o qual engloba um conjunto de instruções para 
posicionamento do personagem na cena, troca de fantasias 
enquanto o personagem realiza o movimento, controle de repetição 
de instruções, controle de tempo, entre outras. Agora vejamos como 
criar um novo bloco de instrução. Para isso, devemos selecionar a 
opção meus Blocos presente na paleta de blocos do ambiente. Nesta 
aba teremos um botão denominado “criar um bloco”, que, ao ser 
clicado, exibe a caixa de diálogo apresentada na figura. 


Criar um Bloco 


nome do bloco 


Adicionar uma Adicionar uma Adicionar um rótulo 
entrada entrada 
número ou texto booleano 


| Executar sem atualização de tela 


Cancelar ES 





Figura 6.6: Caixa de diálogo para criação de um novo bloco. 


Nesta caixa de diálogo devemos definir as características de nosso 
bloco, tais como o nome do bloco e definição do seu tipo, que pode 
ser utilizado para que o jogador entre com um dado do tipo 
numérico, texto ou booleano ( verdadeiro OU falso). 


Na aplicação ninja, a definição dos blocos de movimento exige 
somente um nome para o bloco. Portanto, ao criar cada um dos 
blocos de movimento vamos definir unicamente os nomes: abaixar, 
correr e pular. Após a criação dos três blocos, devemos codificar o 
comportamento de cada um deles, ou seja, o que os blocos abaixar, 
correr € saltar farão. A figura apresenta o código correspondente 
ao bloco correr . 


defina correr 


mude para a fantasia 11 + 


repita O vez 
EEE 0.01 Bells 


próxima fantasia 


mude x em O 


e; 


mude para a fantasia 1 + 





Figura 6.7: Código do bloco correr. 


A primeira instrução do bloco define a fantasia do personagem, 
fazendo com que o ninja seja apresentado em pé no cenário, cuja 
imagem é a de número 11. Após, uma estrutura de repetição é 
utilizada para controlar a troca de fantasias do personagem, visto 
que ele possui 8 fantasias que representam seu movimento de 
corrida, veja a figura. 





Figura 6.8: Fantasias do ninja representando a corrida. 


O processamento do programa sofre uma interrupção de 1 
centésimo de segundo; após, a próxima fantasia é apresentada e a 
coordenada x do personagem é incrementada em 5 pixels, fazendo 
com que a imagem seja deslocada horizontalmente na tela em 
direção à borda direita do palco. Isso faz com que seja realizada a 
animação de corrida do ninja, sempre que a seta para direita no 
teclado for pressionada. O script encerra com o ajuste da fantasia 
do personagem. 


A próxima ilustração representa a sequência de instruções 
envolvidas no movimento abaixar do personagem ninja, realizado 
quando a tecla de seta para baixo do teclado for pressionada. 


defina abaixar 


mude para a fantasia 20 + 





Figura 6.9: Código do bloco abaixar. 


Note que a única instrução presente no bloco abaixar é a mude para 
fantasia , fazendo com que o personagem seja apresentado na cena 
com o aspecto da figura. 





Figura 6.10: Fantasia do personagem no movimento abaixar. 


Por fim, temos o movimento pular, ilustrado na próxima figura. 
Vejamos cada instrução envolvida na simulação do salto do 
personagem, o qual é realizado sempre que a tecla de seta para 
cima for pressionada. 


defina pular 


defina posicao atual + 


mude para a fantasia 1 * 
repita O vezes 
espere seg 


próxima fantasia 


mude y em 10) 


3 


espere (as ] Seg 


defina y como posicao atual 


mude para a fantasia 1 * 





Figura 6.11: Código do bloco pular. 


Para elaboração da lógica de execução desta instrução, a criação 
de uma nova variável denominada posição atual é necessária, visto 
que ela será utilizada para guardar o valor da coordenada y do 
personagem, antes de realizar a animação que faz com que o ninja 
salte no palco. Assim poderemos saber em que posição da cena 
devemos reposicionar o personagem quando o movimento for 
finalizado. Portanto, a primeira instrução do bloco é a definição do 
valor da variável posição atual , que vai armazenar o valor de y 
atual do personagem. 


Na sequência do código, usamos a instrução mude para fantasia, 
para que o personagem seja apresentado com a imagem inicial do 
salto. Então, o controle de repetição das trocas de fantasia é 
inserido no código, fazendo com que o conjunto de instruções 
aninhadas sejam executadas 9 vezes. 


Assim como no bloco correr, devemos utilizar a instrução espere 
para realizar um retardamento no processamento do código, mas 
desta vez serão 5 décimos de segundo, visto que este movimento 
deve ser mais lento, pois devemos sincronizá-lo com o movimento 
de deslocamento dos fantasmas. Dessa forma, possibilitamos que o 
jogador desvie de um fantasma durante a execução da animação. 


A próxima fantasia do personagem é apresentada na cena e a 
coordenada y é incrementada em 10 pixels, simulando o salto e 
fazendo com que o personagem suba em direção ao topo da cena. 
Após o bloco de repetição, novamente há um retardo de 5 décimos 
de segundo e o personagem é recolocado na posição de origem 
antes do salto, sendo apresentado com sua primeira fantasia. A 
figura apresenta todas as fantasias do ninja envolvidas na simulação 
do movimento de salto. 





Figura 6.12: Fantasias envolvidas no movimento pular. 


Resumo do capítulo 


Neste capítulo, foram apresentadas algumas técnicas para o 
controle da movimentação de um personagem em uma cena, onde 
vimos como explorar ainda mais o potencial de interceptação de 
teclas para realização de ações. 


Com a interceptação de eventos combinada com o uso de 
estruturas de repetição, vimos como elaborar rotinas que animam 
nossos personagens durante seu percurso em uma cena. Aspectos 
sobre como altemar fantasias dando mais realidade a uma cena 
foram vistos a partir de exemplos de ações simples como: saltar, 


abaixar, correr, andar etc. 


Outro elemento importante foi a criação de novos clones de um 
personagem, o que é uma característica muito útil na elaboração de 
jogos, pois precisamos gerar inimigos que serão alvos da ação do 
personagem principal do jogo. Isso é realizado com instruções que 
geram cópias a cada intervalo de tempo. 


Por fim, vimos como elaborar blocos de código personalizados, 
onde o programador elabora suas próprias instruções a partir da 
combinação das instruções presentes na paleta de Scratch. Este 
recurso permite a simplificação e reaproveitamento de código em 
nossos projetos, otimizando e organizando a escrita dos scripts. 


6.4 Exercícios 


6.1) Crie um novo projeto denominado fazenda e faça: 

a) Coloque a imagem Farm de plano de fundo do cenário. 

b) Insira na cena um galo, cuja imagem na galeria é a Rooster . 
c) Modifique o tamanho da imagem para 50%. 


d) Crie um novo bloco de código que faça com que o galo ande 10 
pixels para direita. 


e) Codifique o script de início de execução do programa fazendo 
com que o novo bloco de código criado seja repetido sempre. 


f) Insira um personagem besouro na cena, cuja imagem é O Beetle. 
9) Altere para 40% do tamanho da imagem original. 

h) O galo deve apontar sempre em direção ao besouro. 

i) Faça com que o besouro salte na cena quando o galo se 


aproximar. 


Os códigos dos exercícios podem ser obtidos em: 


6.1 Fazenda: https://scratch.mit.edu/projects/442334727/ 





CAPÍTULO 7 
Programação de jogos com Scratch 


Como vimos nos capítulos anteriores, Scratch nos proporciona um 
ambiente rico para a exploração dos conceitos inerentes à atividade 
de programação de computadores, e tudo de uma forma divertida. 
Podemos elaborar projetos a partir de uma ideia criativa que pode 
envolver muitos aspectos relacionados à lógica de construção de 
programas, tais como: definição de variáveis, listas, estruturas de 
tomada de decisão e repetição de instruções. 


Além disso, há sempre um novo aprendizado a cada descoberta, à 
medida que vamos explorando as funcionalidades da linguagem e 
facilidades do ambiente de programação, o que proporciona o 
desenvolvimento de habilidades na área de programação através da 
elaboração de projetos cada vez mais complexos. 


Visando ampliar ainda mais os conhecimentos e a fluência na 
elaboração de projetos e domínio da linguagem Scratch, a partir 
deste capítulo apresentamos uma série de ideias de jogos 
elaborados com a ferramenta. Cada jogo foi pensado para explorar 
cada uma das funcionalidades apresentadas ao longo do livro. 


Portanto, teremos jogos que visam explorar a interação, através da 
digitação de informações solicitadas, onde tomadas de decisão vão 
ocorrer de acordo com as entradas informadas; também teremos 
jogos que exploram o controle de personagens a partir do teclado, 
onde o jogador poderá realizar movimentos e ações com os 
elementos do jogo. Outro aspecto que será muito abordado é o uso 
de variáveis para as mais diversas finalidades, tais como: 
identificação do jogador, pontuação, controle de tempo etc. 


Iniciamos com um jogo de menor complexidade, envolvendo 
somente o controle de interação. No decorrer do texto, veremos 
jogos mais complexos, onde devemos controlar personagens e 


acumular pontos, bem como, tomar cuidado com inimigos. O 
propósito da construção dos jogos é observarmos as possibilidades 
educativas proporcionadas pelo ambiente de Scratch, para que a 
elaboração dos scripts seja uma atividade divertida e, ao mesmo 
tempo, uma oportunidade de aprendizado. 


7.1 Jogo Qual é o Som? 


O jogo Qual é o som realiza uma brincadeira, na qual instrumentos 
musicais são apresentados na cena e o jogador é convidado a 
adivinhar qual instrumento emite um determinado som. Para isso, 
deve-se pressionar um botão que gera um efeito sonoro, simulando 
o toque de um instrumento da cena. Ao ouvir o toque devemos 
selecionar o instrumento, clicando sobre ele. Caso o instrumento 
selecionado seja correspondente ao som emitido, Sandy, a cantora 
lírica, realiza uma saudação. Caso contrário, a personagem 
apresenta uma fala de incentivo ao jogador. A figura ilustra a cena 
da brincadeira. 


Jogo dos Instrumentos 





Figura 7.1: Cena da brincadeira: qual é o som? 


O jogo pode ser obtido, ou jogado online, a partir do site do autor, 
disponível no seguinte endereço eletrônico: 


https://scratch.mit.edu/projects/441661004/ 
Composição do cenário 


Iniciamos o projeto com a composição dos elementos do cenário, 
cujo ponto de partida é a definição da imagem de fundo da cena, 
obtida a partir da galeria de imagens, de nome Theater 2. À seguir, 
foram inseridos os atores que representam os instrumentos 
musicais e a cantora. Os instrumentos são: Drum Kit, Drum-cymbal, 
Drum-snare , Guitar , Guitar-electric , Keyboard € Trumpet . A imagem 
da personagem Sandy — a cantora, cnama-se singer 1. 


Depois de inserirmos os personagens do jogo, devemos inserir o 
título que é apresentado no topo do cenário: “Jogo dos 
Instrumentos”, que foi criado pelo próprio programador do jogo, 


selecionando-se a ferramenta pintar. O título foi elaborado com a 
ferramenta de escrita de texto, a partir do editor gráfico embutido no 
ambiente de Scratch, conforme vemos na próxima figura. 


B- Arquivo Editar $: Tutoriais 





am Código A Fantasias d» Sons 


a 





[| Fantasia fantasia1 e = = 
E 
350 x 45 
Preencher v Sans Serif = 
R 4 
ssa 
S T 
/ O 
O 


Figura 7.2: Elaboração do título do projeto. 


Para finalização do aspecto visual do cenário devemos inserir o 
botão que aciona o toque do som de um instrumento. A imagem do 
botão, cujo nome é button 2, também foi obtida a partir da galeria e 
tem um aspecto de um retângulo com bordas arredondadas. Para 
edição do botão também foi utilizada a ferramenta gráfica de 
Scratch, veja a figura. 





B- Arquivo Editar $: Tutoriais 


== Código «f Fantasias d») Sons 


| 9 Fantasia — button2-a 


button2-a 
121 x 54 





Preencher v Sans Serif = 


Oo 

E k 4 
l! G 
a 
/ O 
O 








Figura 7.3: Edicáo do botáo de comando. 


Note que o botáo possui duas fantasias (imagens) que o 
representam. A primeira apresenta o botão na cor amarela, 
enquanto a segunda é na cor laranja. As fantasias são altemadas 
quando o botão é pressionado, durante a execução do projeto, 
dando a impressão de que ele foi clicado. O rótulo Tocar foi inserido 
com o uso da ferramenta de texto. 


Os efeitos sonoros 


Além do aspecto visual do cenário, temos outros elementos que 
constituem o projeto, que são os efeitos de som que serão 
reproduzidos pelo programa. Dessa forma, devemos selecionar o 


ator botão e, na aba sons inserir cada efeito sonoro a partir dos 
sons presentes na galeria. Note que são 8 efeitos de som que 
devemos inserir, um para cada instrumento presente na cena, 
inclusive o som referente ao canto da Sandy. Os efeitos de som são: 
Cymbal Crash, Drum, Trumpet 1, B Piano, G Bass, G Guitar € Tom Drum. 
A voz da cantora é representada pelo efeito singer 1. Após 
inserirmos cada efeito devemos renomeá-los com o valor de 1 a 8, 
pois vamos identificá-los pela numeração e não pelo nome ao longo 
do programa. Veja a figura: 


B- Arquivo Editar 0 Tutoriais 





Figura 7.4: Edição dos efeitos sonoros do projeto. 


7.2 Scripts do projeto 


A seguir, veremos como foi estruturada a dinâmica de 
funcionamento do projeto. Para isso, primeiramente foi criada uma 
variável denominada som, que será utilizada para identificação do 


som reproduzido no momento em que o jogador pressionar o botão 


Tocar . 


Em seguida, devemos codificar o script da cantora Sandy, referente 
à ação de início de execução do projeto, conforme podemos 
observar na figura. 





quando for clicado 


GLEM Olá, pressione o botão tocar e tente adivinhar qual instrumento emitiu o som. Mag É segundos 
GLEM Então, clique no instrumento. Mes (a segundos 






Figura 7.5: Script de início da execução do projeto. 


Veja que nesse primeiro momento a cantora informa que o botão 
Tocar deve ser pressionado para que o som seja emitido para que o 
jogador tente adivinhar. Em seguida, a cantora solicita que o jogador 
selecione algum instrumento da cena. Então, quando o botão for 
pressionado é disparado o evento apresentado no script da figura a 
seguir. 


quando este ator for clicado 


defina som + a número aleatório entre g$ = O 


toque o som som até o fim 





Figura 7.6: Script de clique no botão Tocar. 


O código começa com a definição do valor da variável som, que é 
gerado de forma aleatória e deve estar no intervalo de 1 e 8, visto 


que representa o número de efeitos sonoros presentes no projeto. 
Vale lembrar que cada efeito sonoro que inserimos no projeto foi 
identificado por um valor numérico. 


O script é finalizado pelo bloco toque o som, que faz com que o som 
de número representado pela variável seja emitido pelo programa. A 
partir deste ponto, o programa aguarda o evento de clique em um 
determinado instrumento apresentado na cena. 


Quando o jogador clicar em um instrumento qualquer, um evento 
será disparado e tratado por um script de código presente no ator. 
Todos os eventos de clique em instrumento realizam um código de 
programa semelhante, portanto, vejamos como exemplo o script do 
Trompete, apresentado na figura a seguir. 





Figura 7.7: Código de resposta ao clique no Trompete. 


Um teste é realizado para verificar o valor presente na variável som, 
pois se for o valor 7, que corresponde ao efeito sonoro do trompete, 
o script emite a mensagem acertou para o ambiente de execução 
do projeto, caso contrário, o som emitido não é o do trompete e a 
mensagem errou é enviada. 


Quem fará o tratamento das mensagens, tanto de erro como de 
acerto, é a cantora. Portanto, devemos elaborar os scripts de 
respostas, após selecionar a personagem no palco. 


Primeiro, vejamos como fica o código de resposta ao acerto, 
representado na figura. 


quando eu receber acertou "e 


sam 





Figura 7.8: Código de resposta ao acerto. 


Poderíamos ter optado por emitir uma única mensagem 
correspondente ao êxito do jogador, entretanto criamos uma 
mensagem personalizada para cada instrumento acertado. Dessa 
forma, proporcionamos uma melhor interatividade da personagem 
com o jogador. 


Caso o jogador tenha acertado o instrumento 1, que no projeto 
representa o Cymbal, a personagem diz parabéns, bom ouvido. Se O 
instrumento for o de número 2, o teclado, a mensagem muito bom é 
emitida e, assim por diante, até o último efeito sonoro que é o canto 
da Sandy. No final, o valor da variável som é zerado. Agora, vejamos 
como ficou o código de resposta ao erro, apresentado na figura. 


quando eu receber errou + 


Ops, vamos tentar novamente! Meg 2) segundos 





Figura 7.9: Código de resposta ao erro. 


O script de resposta ao erro é muito simples, pois possui 
unicamente um bloco de instrução, o qual faz com que a 
personagem realize uma fala de incentivo, solicitando que realize 
uma nova tentativa. 


Para finalizar a descrição dos scripts do projeto, vejamos o que 
acontece quando o jogador clicar na imagem da cantora Sandy: 


quando este ator for clicado 






EM Meus parabéns, acertou! Mal 63 segundos 


defina som * a Co) 


Figura 7.10: Script de clique na cantora. 


O código tem o mesmo comportamento do tratamento do evento de 
acerto, ou seja, quando o jogador clicar na cantora devemos 
verificar se o som que foi emitido é equivalente ao canto da Sandy. 
Em caso afirmativo, a mensagem de parabéns é emitida e a variável 
som é zerada. 


CAPÍTULO 8 
Jogo Cata Gotas 


O próximo jogo apresenta uma aventura, onde o jogador é 
convidado a ajudar a manter o quarto de Jack seco, visto que está 
chovendo torrencialmente e o quarto ficará inundado, pois possui 
muitas goteiras. O jogador dispõe de um recipiente para coletar os 
pingos que insistem que cair do teto. A única forma de coletá-los é 
deslocando o recipiente para direita ou esquerda no cenário, 
utilizando-se as teclas de seta no teclado. 


O jogo é controlado pelo tempo. Não podemos perder muito tempo, 
se não o quarto pode ficar alagado rapidamente. É preciso capturar 
o maior número de gotas possíveis dentro de 30 segundos. Mas 
para ficar mais legal, teremos uma chance de ajudar ainda mais 
Jack: a cada 20 segundos um relógio surgirá na tela para que 
possamos estender o tempo do jogo, se o jogador capturá-lo 
quando ele cair. 


Quanto mais gotas forem capturadas, mais pontos vamos fazer e 
poderemos trocar por dinheiro e pagar o conserto das goteiras do 
telhado da casa de Jack. A pontuação do jogador é apresentada e 
atualizada na cena, assim como o tempo decorrido do jogo. A 
seguir, vamos ver o processo de construção do jogo. 


Você pode jogá-lo de forma online, ou fazer o download do código 
do jogo, disponível no espaço do autor, em: 


https://scratch.mit.edu/projects/244480076/ 


8.1 Tela de abertura 


Ao executar o projeto, uma tela inicial com uma animação é 
apresentada, conforme podemos observar na próxima figura. Nesta 
tela, deve-se informar seu nome e, quando pressionar ENTER OU 
clicar no botão de confirmação, ao lado da caixa onde informou o 
nome, o jogo iniciará. 











Figura 8.1: Cena de abertura do jogo Cata Gotas. 


Para o controle do jogo são utilizadas três variáveis: 


e nome: utilizada para guardar e apresentar o nome do jogador 
no cenário do jogo; 

e tempo: variável usada para controle do tempo decorrido do 
jogo; 

e pontos: para acumular a pontuação à medida que as gotas são 
coletadas. 


Devemos definir as variáveis a partir da paleta de manipulação de 
variáveis. Então, passamos à codificação dos scripts associados ao 


cenário do jogo. Vamos clicar no cenário e escrever o código 
apresentado na figura. 


quando for clicado 


esconda a variável nome w 


esconda a variável tempo + 


esconda a variável pontos * 


mude para o cenário tela inicial + 


AMIA Qual o seu nome? RRA 


defina nome * a resposta 


mude para o cenário jogando * 





Figura 8.2: Script de inicialização do jogo. 


O código inicia com as instruções que escondem as variáveis 
utilizadas no jogo porque não devem aparecer na tela de abertura. 
Elas só aparecerão na tela de jogo que será apresentada depois 
que você inserir seu nome e der início à saga de captura de gotas. 


Em seguida, temos a instrução de troca do cenário que será 
apresentado. Neste caso, o cenário que representa a tela inicial que 
faz a abertura do jogo é apresentado e o seu nome é solicitado pelo 
jogo. Quanto o jogador digitar seu nome e confirmar, o conteúdo da 
resposta é guardado na variável nome, então o cenário é alterado 
para a tela de jogo. 


Em paralelo à execução da tela inicial, é emitido um efeito sonoro e 
realizada uma animação com as letras que compõem o jogo. A 
figura mostra o evento que é executado quando o cenário tela inicial 
é apresentado. Veja que somente uma instrução é realizada, a qual 
emite a música da tela de abertura do jogo. 





quando o cenário mudar para tela inicial + 


toque o som triumph * 





Figura 8.3: Emissão da música da tela de abertura do jogo. 


8.2 Animação do título do jogo 


Cada letra que compõe a animação do jogo possui um script 
próprio, visto que realiza um movimento distinto de descida na tela 


de abertura. Para codificação de cada animação, devemos 
selecionar cada letra e codificar seu script. Para fins de 
exemplificação, vejamos como ficou a animação da letra c, 
ilustrada na figura a seguir. 


quando for clicado 


defina x como [-167) 
| 
defina y como (135 ) 


mostre 


repita até que posiçãoy O, í< 


mude y em ED 
espere D seg 





Figura 8.4: Animação da letra C na tela de abertura. 


O código inicia com o posicionamento do ator que representa a letra 
no palco, identifican do-se as coordenadas de x e y, e coma 
instrução que mostra a figura na tela. Logo a seguir, uma instrução 
de repetição faz com que o valor da coordenada y seja 
decrementado em 10 unidades até que seja menor que 86, que é a 


coordenada limite, isso é realizado a cada fração de 1 décimo de 
segundo. 


Todas as letras possuem um comportamento semelhante ao script 
apresentado, com a diferença em relação à modificação das 
coordenadas que vão posicionar o ator na tela. Quando o cenário for 
mudado para a tela de jogo, todas as letras deverão ser escondidas, 
portanto, o código apresentado na figura deve ser executado. 


quando o cenário mudar para jogando * 


esconda 





Figura 8.5: Escondendo as letras da tela inicial. 


8.3 Definição de variáveis e controle do tempo 


Em relação à tela de abertura, ainda temos alguns scripts que 
devemos codificar, como o que é realizado quando mudamos o 
cenário para a tela de jogo e o que deve ser executado ao final do 
jogo. A figura apresenta o código de preparação para a execução da 
tela de jogo. 











mude para o cenário 


fim de jogo * 








Figura 8.6: Preparação da tela de jogo. 


Basicamente, temos que apresentar as variáveis nome, pontos € 
tempo na tela de jogo, pois foram omitidas na tela de abertura. 
Portanto, são as primeiras instruções a serem realizadas. Logo, 
devemos inicializar as variáveis de controle dos pontos e tempo 
decorrido do jogo, visto que seus valores iniciais devem ser 
definidos em zero. Então, é executada a instrução denominada em, 
que faz com que a música do jogo seja tocada. A música escolhida 
foi a Lovable Clown Sit Com.mp3, de domínio público, obtida no 
YouTube. 


Note que o bloco de repetição faz o controle do tempo de jogo, ou 
seja, enquanto a variável que controla o tempo não extrapolar o 
valor máximo, que é 30 segundos, o incremento do tempo é 
realizado no interior do bloco, a cada fração de 1 segundo. Se o 
tempo não for estendido até o final da execução da estrutura de 
repetição, o cenário de fim de jogo é apresentado. 


Se o jogador não conseguir ampliar o tempo de jogo pela captura do 
relógio que aparece aleatoriamente na tela, o jogo será finalizado e 
será executado o código apresentado na figura. 


quando o cenário mudar para fimdejogo * 


toque o som zoop * 


| espere 4 seg 


| pare todos * 





Figura 8.7: Finalizando o jogo. 


O script de fim de jogo é disparado pela ocorrência do evento 
associado, o qual inicia com o toque do efeito sonoro de 
encerramento, seguido por uma pausa no processamento do 
programa por 1 segundo, culminando na interrupção da execução 
de todos os scripts de código envolvidos no projeto. 


8.4 O cenário de jogo 


Agora, passemos à descrição dos scripts envolvidos na dinâmica do 
jogo, o qual efetivamente inicia quando a tela de jogo é 
apresentada, conforme ilustrado na seguinte figura. 


AIT] 


A 





Figura 8.8: Tela de jogo. 


Os personagens que compõem o jogo são: o pote para coleta dos 
respingos da chuva que caem do teto, as gotas que passam pelas 
frestas do telhado e o relógio para extensáo do tempo de jogo. Toda 
a dinámica do jogo passa por esses três elementos essenciais. 
Portanto, iniciamos pela descrição do comportamento do pote, 
ilustrado através da figura. 


< Os 


Figura 8.9: Controle do pote coletor de gotas. 


8.5 Movimento do pote 


O comportamento de coleta de gotas é realizado com o 
deslocamento do pote na base do cenário, usando-se para isso as 
teclas de direção do teclado, as setas para a direita e esquerda, 
conforme ilustrado na figura. A figura apresenta o script de controle 
do processo, o qual inicia com a mudança para o cenário de jogo. 





quando o cenário mudar para jogando w 
mostre 
sempre 


se tecla seta para direita + pressionada? então 
aponte para a direção 


mova 10) passos 


se tecla seta para esquerda * pressionada? então 


aponte para a direção 90) 
mova O passos 


se tocar na borda, volte 


Figura 8.10: Script de controle do processo de coleta de gotas. 


A primeira ação a ser realizada é mostrar o ator na cena, visto que 
estava oculto na tela de abertura do jogo. Veja a figura. Todo o 


controle de interceptação das ações de movimentação do pote é 
realizado no interior de uma estrutura de repetição, onde a todo o 
momento é verificado se o jogador pressionou alguma tecla de 
direção, e para isso são definidas duas estruturas de tomada de 
decisão. 


quando for clicado 


esconda 





Figura 8.11: Escondendo o pote na tela de abertura. 


A primeira estrutura de tomada de decisão verifica se a seta para 
direita foi pressionada; em caso afirmativo, fazemos com que o pote 
aponte na direção desejada, então a imagem é deslocada em 10 
passos na cena. 


Já a segunda estrutura faz exatamente o contrário, ou seja, verifica 
se o jogador pressionou a tecla de direção para esquerda e, em 
caso afirmativo, o pote é direcionado para a esquerda e a imagem é 
deslocada 10 passos. 


Observe que o deslocamento do pote está condicionado aos limites 
impostos pelas dimensões do palco, portanto devemos verificar se o 
pote chegou a alguma extremidade da tela e, se isso acontecer, 
devemos fazer com que volte, evitando-se que ele ultrapasse 
alguma das margens do cenário. O pote deve estar visível somente 
enquanto a tela de jogo é apresentada; durante a apresentação da 
tela de abertura ou quando o jogo for finalizado o ator deverá ser 


oculto. O código apresentado na próxima figura demonstra esse 
comportamento. 


quando o cenário mudar para fim de jogo * 


esconda 





Figura 8.12: Escondendo o pote na tela de fim de jogo. 


8.6 As goteiras 


Como o telhado da casa de Jack está muito estragado, muitas 
goteiras surgiram, então gotas de água caem a todo o momento. O 
surgimento das gotas é aleatório, o que faz com que o pote tenha 
que ser deslocado incessantemente pelo chão do quarto. Na figura 
podemos observar como é realizado o controle do movimento da 
gota durante sua queda que inicia logo que a tela de jogo é 
apresentada ao jogador. 


quando o cenário mudar para jogando vw 


defina o tamanho como (50) % 


sempre 


vá para x: número aleatório entre | -223 ) e 224) y: (154) 


mostre 


repita até que tocando em borda v ? 


mude y em (10) 


se tocando em Bowl» ? então 


mude pontos * para (5) 


esconda 


mude y em | -500 ) 


J 





Figura 8.13: Movimento de queda da gota. 


Primeiramente, a imagem da gota é redimensionada para que o 
tamanho seja adequado à área do palco. Uma estrutura de 
repetição vai controlar o processo de queda. A primeira instrução é 
o posicionamento da gota sempre ao topo da tela, o que é obtido 
pelo ajuste da coordenada y com o valor fixo de 154 pixels, 
enquanto a coordenada x é um valor variável, entre o limite 
esquerdo e direito do palco, sendo gerado aleatoriamente pela 
instrução número aleatório entre . Após a gota ser posicionada, ela é 
apresentada na cena para que se inicie o processo de queda. 


A queda da gota ainda é controlada por outra estrutura de repetição, 
porque a gota deve cair até atingir o chão e, quando isso acontecer, 
devemos gerar uma nova gota e reiniciar todo o processo de queda 
novamente. Entretanto, durante a queda, pode ocorrer a captura da 
gota pelo pote, isso é verificado exatamente por uma estrutura de 
tomada de decisão que verifica se a gota tocou no pote. Em caso 
afirmativo, algumas ações devem ser tomadas, tais como: devemos 
adicionar 5 pontos na variável de controle de pontuação do jogo, um 
efeito sonoro é emitido para simulação da coleta da gota pelo pote e 
a gota é ocultada da cena, dando a impressão de que sumiu no 
interior do pote. 


Quando a tela de abertura for apresentada, a gota não poderá ser 
mostrada na cena, portanto o script da figura é realizado. 


quando for clicado 


esconda 





Figura 8.14: Ocultando a gota na tela de abertura do jogo. 


Além disso, também devemos ocultar a imagem da gota quando o 
jogo for finalizado, pois o ator não deve aparecer na tela de fim, veja 
a figura que apresenta o código de ocultação da gota. 


quando o cenário mudar para fimdejogo *w 


esconda 





Figura 8.15: Ocultando a gota na tela de finalização do jogo. 


CAPÍTULO 9 
Jogo Paddle 


O Paddle é baseado no jogo eletrônico Pong, clássico da década de 
70. Trata-se de um simulador de Tênis, onde o jogador deve 
controlar uma barra, a qual representa uma raquete, para rebater a 
bola. A dinâmica do jogo envolve a movimentação constante da 
raquete, de um lado para outro na base da quadra, evitando-se que 
a bola atinja a barra vermelha. Caso isso ocorra, será o fim do jogo. 


A pontuação é realizada cada vez que o jogador rebater a bola, mas 
para dar mais dinâmica ao jogo, a cada batida da bola nas bordas 
laterais da quadra também é atribuída uma pontuação ao jogador. 
Veja na figura o cenário do jogo. O controle de pontuação é 
realizado por uma variável denominada pontos , a qual deve ser 
criada. A variável é apresentada no topo do cenário. 





Figura 9.1: Cenário do jogo Paddle. 


Para jogar de forma online, ou realizar o download do código do 
jogo, basta acessar o seguinte endereço eletrônico: 


https://scratch.mit.edu/projects/383611242/ 


9.1 Os elementos da cena 


Para composicáo do cenário, foi utilizada a imagem de fundo 
denominada stars, a qual está presente na galeria de imagens. Os 
atores presentes no cenário sáo: 


e a bola: obtida a partir da imagem Bali, também presente na 
galeria. Note que a bola possui algumas fantasias associadas, 
mas precisamos somente da fantasia Ball-a , portanto podemos 
descartar as demais; 

e a raquete: outra imagem obtida da galeria, denominada Paddle , 
esta imagem possui somente uma fantasia no formato de uma 
barra horizontal na cor verde; 

e a linha da base: linha vermelha presente na base da tela, cujo 
elemento na galeria é chamado de Line . Esta linha é usada 
para controlar o final do jogo, caso seja tocada pela bola. 


Vejamos algumas ações iniciais que devem ser codificadas no 
cenário do jogo. Quando o jogo iniciar, devemos emitir a música 
tema, que será tocada enquanto o jogo estiver em andamento. A 
figura apresenta o código: 


quando for clicado 


sempre 


toque o som Video Game 1 + até o fim 





Figura 9.2: Disparando a música tema do jogo. 


Outra ação que devemos codificar no elemento cenário é o término 
do processamento do jogo, que ocorre quando a mensagem de 
finalização é recebida pelo cenário, conforme podemos observar na 
próxima figura. 


quando eu receber fim + 


pare outros scri pts no ator + 





Figura 9.3: Término do jogo. 


9.2 Comportamento da raquete 


Agora vamos detalhar as ações de controle da raquete, seus 
movimentos e seu comportamento, cujo script de código é 
apresentado na figura. 


quando for clicado 


ar O) ED 


sempre 


pressionada? então 


seta para esquerda + pressionada? entáo 


se tocar na borda, volte 





Figura 9.4: Código de comportamento da raquete. 


O controle da raquete é realizado assim que o jogo começa, 
iniciando pelo posicionamento da raquete nas coordenadas de 
partida, conforme podemos observar na ilustração. Em seguida, 
uma estrutura de repetição é inserida no código para realizar o 
controle dos movimentos laterais da raquete. 


No interior da estrutura de repetição, temos dois controles de 
tomada de decisão: o primeiro faz a verificação do estado da tecla 
de direção para a direita que, caso pressionada, devemos 
incrementar o valor da coordenada x, fazendo com que a raquete 
deslize em direção à borda direita da quadra; o segundo verifica se 
o jogador pressionou a tecla de seta para a esquerda, fazendo com 
que a coordenada x seja decrementada, o que realiza o 
deslocamento da raquete em direção à borda esquerda. 


Outro controle importante que deve ser realizado ao longo do 
deslocamento da raquete, tanto para a direita como para a 
esquerda, é verificar se não foi atingido algum limite da quadra. Isso 
é feito pela instrução se tocar a borda, volte, de modo que a raquete 
não ultrapasse o cenário, o que faria com que ela sumisse do 
campo de visão do jogador. 


O último script do personagem raquete é o que verifica se o jogo 
chegou ao fim, pois em caso afirmativo todos os códigos do 
personagem devem ser interrompidos. Isso é verificado quando o 
personagem receber a mensagem fim, veja o código na figura. 


quando eu receber fim * 


pare outros scripts no ator + 





Figura 9.5: Final do jogo, a raquete é parada. 


9.3 Controle da bola 


O controle do movimento da bola é o mais complexo do jogo, visto 
que envolve vários aspectos, tais como: movimentação do ator pelo 
cenário, controle da pontuação, controle do fim de jogo etc. Na 
figura a seguir podemos verificar os blocos inicias do código que 
compõe o comportamento da bola. 


quando for clicado 


mostre a variável pontos * 


mude pontos * para O 


aponte para Paddle + 





Figura 9.6: O comportamento da bola, blocos iniciais. 


Em seguida, temos os blocos complementares, os quais controlam o 
deslocamento da bola pelo cenário do jogo, veja a figura. 


sempre 


mowa ES passos 


5e tocando em borda Ta entao 


adicione [1] a pontos 


se tocar na borda, volte 





se tocando em Paddle + T então 


adicione fo a pontos + 


se posição x * de Paddle w > então 


aponte para a direção las] 


senā 


aponte para a direçāo [45] 


tocando em Line * T então 
transmita fim = 


pare este script * 


= 0.0001 Mola 


o 


Figura 9.7: O comportamento da bola, blocos de controle. 


Quando iniciar a execução do jogo, a variável de controle da 
pontuação é apresentada à esquerda da margem superior do 
cenário e seu valor é ajustado para zero, visto que o jogador ainda 
não fez pontos. Após, a bola é deslocada para sua posição inicial na 
quadra, o que é realizado pela instrução vá para, então fazemos 
com que a bola aponte para a raquete porque deve realizar o 
movimento de deslocamento nesta direção. 


Logo a seguir, uma estrutura de repetição é iniciada para realizar o 
controle de todo o comportamento da bola. A movimentação da bola 
ocorre em 5 passos e após isso devemos verificar se o personagem 
tocou ou não a borda do cenário, o que é realizado por uma 
estrutura de tomada de decisão. Caso tenha a bola tenha atingido a 
borda, um efeito sonoro é emitido e 1 ponto é acumulado para o 
jogador e, então, a instrução se tocar na bola volte é executada, 
desviando-se a trajetória da bola para o caminho de retomo. 


Outra avaliação a ser realizada no código é se a bola atingiu a 
raquete. Neste caso, devemos adicionar 5 pontos ao jogador e 
emitir o efeito sonoro de rebatimento. A instrução de tomada de 
decisão seguinte realiza uma verificação das coordenadas da bola, 
cujo objetivo é definir qual rota de deslocamento a bola deve seguir 
após um rebatimento. Se a raquete estiver à direita do centro do 
palco, a nova rota de deslocamento da bola será em direção à 
esquerda do palco, caso contrário, a direção será para a direita. 


No final da estrutura, uma última estrutura de tomada de decisão é 
utilizada para verificar se a bola chegou à base do palco e, em caso 
afirmativo, devemos encerrar o jogo. Para isso, uma mensagem de 
finalização é enviada para o ambiente do Scratch e o script é 
finalizado. Se não for atingida a base, culminando na finalização do 
jogo, o processamento do código é retardado em 1 milissegundo 
antes da repetição das instruções. O último elemento gráfico que 
vamos descrever é a imagem que apresenta a mensagem: F I m. 
Tente novamente! . Essa imagem deve ser apresentada ao jogador 


quando o jogo for finalizado e ocultada no momento que o jogo é 
iniciado, veja a figura. 


quando for clicado 


esconda 





Figura 9.8: Imagem de finalização oculta no início do programa. 


Quando o jogo é finalizado e a imagem de fim receber a mensagem, 
o script apresentado na figura é executado. 


quando eu receber fim *w 


mostre 


pare todos os sons 


toque o som Lose * até o fim 


pare todos * 





Figura 9.9: Encerrando a execução do programa. 


Quando o ator receber a mensagem de fim de jogo, a imagem é 
apresentada na cena e, em seguida, todos os sons em execução no 
momento são interrompidos e o som efeito sonoro de finalização é 
emitido. Por fim, todos os scripts são finalizados. 


CAPÍTULO 10 
Jogo Camélia Maluca 


Camélia maluca é um jogo educativo que envolve o raciocínio na 
resolução de problemas matemáticos baseados na aritmética. O 
jogador é convidado pela bruxa Camélia a resolver seu problema, 
que é calcular as quantidades necessárias dos ingredientes de sua 
poção mágica. Entretanto, a calculadora de Camélia tem um 
problema sério, pois possui somente algumas teclas para que o 
jogador realize os cálculos e encontre o resultado esperado. 


A dinâmica do jogo funciona da seguinte forma: alguns números são 
apresentados em um quadro ao jogador. Eles representam as 
quantidades dos ingredientes, então o jogador deverá construir 
expressões de cálculo, usando somente as operações de soma e 
multiplicação, bem como fazendo uso dos números 2 e 3. 


Toda vez que o jogador conseguir calcular um dos números 
apresentados no quadro, o número é riscado. Os resultados parciais 
dos cálculos, tanto de soma como de multiplicação, são 
apresentados em um painel sobre o quadro de números. Quando o 
jogador calcular todos os valores disponíveis, Camélia agradece e o 
programa é encerrado. Veja o cenário do jogo na próxima figura. 


12 15 2050 





Figura 10.1: Cenário do jogo Camélia Maluca. 


O código do jogo Camélia Maluca está disponível no seguinte 
endereço eletrônico, onde você também pode jogá-lo de forma 
online: https://scratch.mit.edu/projects/400602535/ 


10.1 Os elementos gráficos 


O cenário é composto pelos seguintes elementos gráficos: 


e Plano de fundo do cenário: o jogo possui uma única cena, 
decorada por um único plano de fundo, que representa o 
interior da casa da bruxa. A imagem que representa a casa foi 
obtida a partir da galeria e o nome é witch House. 


e Bruxa: a personagem Camélia também está presente na 
galeria de atores. Sua imagem é a witch . Note que ela possui 4 


fantasias, mas no jogo utilizamos somente duas, a witch-c e a 
witch -b : 





Figura 10.2: Fantasias da Camélia. 


e Painel de números: este é um simples retângulo branco, com 
bordas na cor preta, que foi desenhado a partir do editor gráfico 
de Scratch, onde serão dispostos os números que o jogador 
deve calcular (veja a figura). 


B- Arquivo Editar 0) Tutoriais 





8 Código RA Fantasias d) Sons 





Fantasia — fantasia! mm z * 

Preencher [| Contornar O 4 B Ú > y 
Copiar Apag 

O + 

7 e 

A T 

Fr O 

O 


Ga Converter para Bitmap Q/=/18 


Figura 10.3: Criação do painel de números. 


e Números: cada número que devemos adivinhar também foi 
elaborado com o editor gráfico. A figura apresenta o processo 
de criação do número 6. Observe que o ator possui duas 
fantasias, a segunda apresenta o número riscado. 


B- Arquivo Editar 0: Tutoriais 





22 Código AÍ Fantasias d) Sons 





E E E 


Figura 10.4: Criação dos números do painel. 


e Teclas: as teclas também foram desenhadas no editor gráfico e 
foram elaboradas a partir de um circulo branco com borda 
preta. A única tecla diferente é a c , que foi preenchida na cor 
vermelha, veja a figura. 


B 
y” 





(ada) Converter para Bitmap Q = a 


Figura 10.5: Criação da tecla clear. 


Após a insercáo e criacáo de cada elemento gráfico que constitui a 
cena, eles foram dispostos em suas respectivas posições, inclusive 
a variável que representa o painel da calculadora maluca. 


10.2 Variáveis utilizadas no jogo 


O jogo utiliza algumas variáveis no decorrer do processamento das 
ações dos personagens, são elas: 


e painel : guarda o resultado das operações realizadas pelo 
jogador, o qual é apresentado e atualizado na cena a cada nova 
operação; 

e painel anterior : guarda o conteúdo atual do painel, sempre que 
o jogador pressionar a tecla de igualdade; 

e operador : armazena o operador clicado; 

e novo operador : Variável auxiliar para a troca de operador, sempre 
que um operador for clicado pelo jogador, 

e operador clicado : Variável cujo conteúdo será sim OU não, 
indicando se um operador foi clicado ou não durante a 


execução do jogo. 


Ao longo da explicação vamos entender melhor por que e quando 
são utilizadas as variáveis do programa. Neste momento, só 
devemos realizar a criação delas para o funcionamento do jogo. 


10.3 Início do jogo 


Quando o jogo é iniciado, a personagem Camélia é apresentada ao 
jogador com sua fantasia onde apresenta uma expressão de 
preocupação, pois perdeu seu livro de magias e não se lembra de 
como fazer a poção. Essa é a primeira instrução do script de início 
das ações de Camélia. 


Além disso, as variáveis de controle utilizadas ao longo do jogo são 
definidas com seus valores iniciais. Como podemos observar, o 
valor da variável operador é iniciado com nenhum, pois no começo do 
programa nenhum operador foi clicado ainda. A variável painel é 
iniciada com o valor zero, assim como a painel anterior, e a variável 
operador clicado é inicializada com o valor não. 


Veja a figura que apresenta as ações realizadas por Camélia no 
início do jogo. 


quando for clicado 


mude para a fantasia witch-c v 


defina operador» a | nenhum) 


defina painel» a Lo] 

defina painel anterior v a O 

defina operador clicado +» a É não ) 

diga por O segundos 
sga oO sounco: 
doa por ED) sesunao 
soa TED 














Figura 10.6: Script de início das ações de Camélia. 


Na sequência, são apresentadas as falas da personagem, iniciando 
por uma saudação ao jogador, seguida de uma explanação sobre o 
problema encontrado pela Camélia e a solicitação da ajuda. Cada 
fala da bruxa permanece por 3 segundos na cena. 


Também, ao início da execução do programa, as fantasias de cada 
ator que representam os números do painel devem ser ajustadas, 
pois a aparência inicial dos números é a normal e não riscada. Cada 
ator que representa um número deverá ter um código semelhante 
ao apresentado na figura. 


quando for clicado 


mude para a fantasia fantasial + 





Figura 10.7: Ajuste da aparência dos números do painel ao início do programa. 


10.4 Funcionamento da calculadora 


A Calculadora Maluca, apesar do nome, funciona da mesma forma 
que as calculadoras convencionais, com a única particularidade de 
que não possui algumas teclas. Para digitar um valor, basta ir 
clicando nos dígitos, neste caso, somente nos dígitos disponíveis. 
Cada dígito clicado será apresentado no painel, um após o outro, 
enquanto um operador não for clicado. Veja o código apresentado 
na figura, o qual representa o script associado ao clique na tecla 2 
da calculadora. 





Figura 10.8: Controle do clique na tecla do dígito 2 da calculadora. 


A primeira instrução de tomada de decisão realiza uma verificação 
do valor da variável operador clicado . Caso nenhum operador tenha 
sido clicado até o momento, o código de definição do novo valor do 
painel é executado. Esse código faz com que os dígitos clicados 
pelo jogador sejam apresentados um ao lado do outro no painel. 
Para que isso seja possível, uma operação aritmética é executada, 
onde o valor atual do painel é multiplicado por 10 e o resultado da 
operação é somado ao dígito 2, o qual foi clicado pelo jogador no 
teclado. Veja que se tivéssemos somente somado o valor do painel 
com o dígito 2 não daria o resultado desejado, por isso a técnica 
empregada foi necessária. 


Agora, caso o jogador tenha selecionado algum dos operadores da 
calculadora antes de ter clicado na tecla do dígito 2, o conteúdo 
atual do painel será substituído pelo valor 2, mas depois de 
guardarmos o valor atual do painel na variável painel anterior . Essa 
ação é importante, se não perderíamos o valor que estava no painel 
e não poderíamos realizar alguma operação aritmética com ele. 


No exemplo, vimos o comportamento da tecla referente ao dígito 2 
da calculadora, entretanto, o comportamento da tecla que 
representa o dígito 3 é semelhante, onde a única parte do código 
que muda é na expressão de definição do painel, pois temos que 
mostrar o valor 3. 


10.5 Realização de uma operação aritmética 


Após a composição do primeiro operando da operação aritmética, o 
jogador deverá pressionar um dos operadores disponíveis na 
calculadora, o operador de adição ou multiplicação. Sempre que um 
deles for clicado devemos indicar na variável denominada 

novo operador € a mensagem operador clicado é enviada ao 
ambiente. Veja a figura. 


quando este ator for clicado 


defina novo operador * a O 


transmita operador clicado * 





Figura 10.9: Realização de uma operação aritmética. 


O tratamento da mensagem operador clicado é realizado pela 
personagem Camélia. A explicação do código será realizada em 
partes, visto que é extenso. O código começa quando a 
personagem receber a mensagem através do evento quando eu 
receber , Conforme podemos observar na figura. 





Figura 10.10: Verificação de qual operador foi clicado. 


Inicialmente, deve-se verificar qual operador foi selecionado pelo 
jogador, o que é realizado pela estrutura de tomada de decisão. Se 
o operador clicado for o de adição, é realizada uma operação de 
soma do conteúdo presente na variável painel anterior como da 
variável painel. O resultado dessa expressão de cálculo é colocado 
na variável painel. 


A próxima verificação a ser realizada é se o operador clicado foi o 
de multiplicação. Neste caso, devemos fazer uma avaliação da 
variável painel anterior , pois se for um valor maior que zero 
podemos dar prosseguimento à operação aritmética; caso contrário, 
a operação é ignorada. Na sequência, as variáveis são atualizadas, 
conforme podemos observar na figura. 


defina operador clicado + a sim 


defina operador * a novo operador 


defina painel anterior a painel 





Figura 10.11: Atualização das variáveis. 


A primeira variável a ser ajustada é a operador clicado , cujo valor 
assinalado é sim, indicando que houve um clique em algum dos 
operadores da calculadora. Em seguida, o valor presente na variável 
novo operador é também armazenado em operador , finalizando pela 
operação que guarda o valor de painel na variável painel anterior. 


10.6 Acerto de um valor 


A figura dá sequência ao código, onde será verificado se algum dos 
números do painel foi acertado pelo jogador. O código é composto 
por um conjunto de instruções para tomada de decisão. 








Figura 10.12: Verificação de acerto, blocos iniciais. 


A próxima figura dá sequência ao conjunto de instruções para 
tomada de decisão. 


Figura 10.13: Verificação de acerto, blocos finais. 


Na continuação do código, devemos realizar uma série de estruturas 
de tomada de decisão para verificação do valor presente no painel. 
De acordo com o valor obtido no painel, devemos desencadear a 
mensagem apropriada ao ambiente, indicando se houve algum 
acerto dos números até o momento. O envio da mensagem de 
acerto será interceptado pelos atores que representam os números 
(6, 7, 8, 10, 12, 15, 20 e 50). Veja o código da figura. 


quando eu receber acertou seis + 


mude para a fantasia fantasia? * 


transmita verificar fim * 





Figura 10.14: Código de interceptação da mensagem de acerto. 


Na ilustração, temos a representação do script referente à 
interceptação da mensagem acertou seis, Caso isso ocorra 
devemos modificar a fantasia do ator, mostrando o número 6 riscado 
no painel. 


10.7 Verificação de fim do jogo 


Após a marcação de um número no painel devemos verificar se o 
jogo já chegou ao fim, visto que todos os números já podem ter sido 


acertados. Para isso, uma nova mensagem é emitida para o 
ambiente do jogo, a mensagem verificar fim. A verificação de fim 
de jogo é realizada por um script associado à personagem Camélia, 
cujo código é apresentado na figura a seguir. 


quando eu receber verificar fim * 


verificarFim 





Figura 10.15: Verificacáo de fim do jogo. 


Veja que o evento quando eu receber , ao tratar a mensagem 
verificar fim, realiza a execução de uma instrução criada pelo 
programador, denominada verificarrim. A figura apresenta o código 
dela. 


nº da fantasia + de seisv = O 
n° da fantasia v de sete = E 
nº da fantasia +» de oito» = Es 
nº da fantasia + de dez v = Es 


nº da fantasia v de doze v = £& 


nº da fantasia v de quinze + = (2) 


n° da fantasia + de vinte e = O 





nº da fantasia + de cinquenta + 





mude para a fantasia witch-b + 


RES Muito obrigada, vou conseguir elaborar minha poção! Nas O segundos 


Figura 10.16: Código da instrução verificarF im. 


A instrução realiza uma série de testes de verificação para descobrir 
se todos os números já formam acertados pelo jogador. Esta 
verificação é realizada por estruturas de tomada de decisão, as 
quais avaliam a fantasia do ator, pois se a fantasia atual é a 
segunda, significa que o número está riscado e, se todos os 
números do painel estiverem riscados, é sinal de que o jogo chegou 
ao fim. Portanto, mudamos a fantasia da bruxa Camélia para sua 
expressão de contentamento e a fala de agradecimento é realizada, 
permanecendo na cena por 5 segundos. Depois, fechamos o script 
com o encerramento de todas as atividades que ainda estejam em 
execução. 


O aninhamento de estruturas de tomada de decisão apresentado no 
código poderia ser substituído por uma única tomada de decisão. 
Neste caso, devemos utilizar o conectivo lógico da conjunção, o e 
lógico, para criação de um teste composto. Essa variação de código 
não foi utilizada neste exemplo devido ao espaço de tela necessário 
para representar a figura, mas seria uma solução mais elegante a 
adotada no exemplo, evitando-se o aninhamento. 


O jogador pode cancelar uma operação aritmética, limpando o 
painel de visualização dos resultados, o que é realizado com o 
clique no botão clear da calculadora. Veja o código na figura. 


quando este ator for clicado 


painel + a O 


defina painel anterior * 


defina operador * a | nenhum | 
defina operador_clicado * a não, 


Figura 10.17: Limpando o painel de visualização. 





Quando ocorre o evento quando este ator for clicado, as variáveis de 
controle são redefinidas para seus valores iniciais, ou seja, a 
variável painel é zerada, bem como, a painel anterior , enquanto a 
variável operador recebe o valor nenhum e a variável operador clicado 
é ajustada para conter o valor não. 


CAPÍTULO 11 
Jogo Pesca Submersa 


O jogo Pesca Submersa é uma aventura onde um pescador 
impaciente resolve mergulhar no rio em busca dos peixes, pois 
cansou de ficar parado na beira do rio aguardando que algum peixe 
morda a isca. 


Dessa forma, a dinâmica do jogo envolve o controle do mergulhador, 
que é o personagem principal. Ele nada em todas as direções e 
para isso devemos usar as setas de direção do teclado, para cima, 
baixo, esquerda ou direita. Os limites do rio são respeitados, 
portanto, quando o mergulhador chegar a alguma das bordas do 
cenário será impedido de continuar. A figura ilustra o cenário do 
jogo. 





Figura 11.1: Cenário do jogo Pesca Submersa. 


O jogo Pesca submersa pode ser acessado de forma online, a partir 
do seguinte endereço eletrônico: 


https://scratch.mit.edu/projects/247716339/ 


11.1 Definicáo do cenário 


A imagem de fundo do cenário é a underwater3 , presente na galeria 
do Scratch. Além disso, algumas variáveis devem ser definidas: 


e energia: usada para controlar o tempo de vida do mergulhador, 
a energia é decrementada a cada vez que um inimigo realizar 
um ataque; 

e pontos: esta variável apresenta os pontos acumulados pelo 
jogador ao longo do jogo, os quais são obtidos pela captura dos 
peixes, ou ataque aos inimigos; 

e y_fish1: esta variável é utilizada com fator de incremento da 
coordenada y do peixe lilás para realização do deslocamento 
do ator em direção ao topo do cenário; 

e y fish2: variável utilizada para guardar a constante de 
incremento da coordenada y do peixe amarelo, fazendo com 
que o peixe nade em direção à superfície; 

e X fish3: define o fator de incremento da coordenada x do 
peixe enfezado, realizando o deslocamento horizontal do peixe 
em direção à margem direita do cenário. 


Note que cada tipo de peixe tem um fator de incremento diferente 
em uma de suas coordenadas de tela, o que vai refletir na 
velocidade de nado. O peixe lilás é o mais lento, cujo fator de 
deslocamento é 2, enquanto o peixe amarelo é um pouco mais 
rápido, visto que seu fator de deslocamento é 5. Já o peixe 
enfezado é o mais rápido, com fator de deslocamento em 10. Os 
fatores de deslocamento podem ser alterados, basta modificar os 
valores das variáveis. 


Durante o nado do mergulhador, surgirão alguns peixes, mas 
cuidado, pois nem tudo que se move pode ser pescado. Somente 
dois tipos de peixes podem ser pescados: amarelo e lilás. Veja a 
figura que mostra a aparência dos alvos. 





Figura 11.2: Peixes que podem ser pescados. 


Fique atento durante a pesca, visto que algumas surpresas podem 
surgir a qualquer momento, tomando a aventura mais perigosa. 
Alguns inimigos marinhos aparecem e realizam ataques fulminantes 
ao pescador, tal como o peixe enfezado, cuja aparência já diz tudo, 
veja a figura. O peixe enfezado deve ser evitado, pois sua mordida 
causa danos de energia ao pescador. 





Figura 11.3: Peixe enfezado. 


Outro perigo constante é o caranguejo vermelho, o qual surge nas 
profundezas do rio. Ele fica enterrado na areia e aparece de tempos 
em tempos. O problema é que não gosta de pescadores e, assim 
que se desenterra, parte em direção a seu alvo de forma voraz. 
Tenha cuidado, pois costumam se reproduzir rapidamente, fazendo 
com que em pouco tempo o rio fique tomado de caranguejos. Veja, 
na figura, a aparência do caranguejo vermelho. 





Figura 11.4: Caranguejo vermelho. 


Apesar de o caranguejo vermelho ser uma grande ameaça à 
integridade do mergulhador, temos uma arma letal a esse inimigo 
incoveniente, o nosso raio da morte. Quando o caranguejo se 
aproxima do nadador há a possibilidade de emitir um laser quer cria 
uma área de proteção entomo do mergulhador. Quando o 
caranguejo atinge o raio sofre uma morte fulminante. A figura 
apresenta o raio em ação. 





Figura 11.5: O raio da morte. 


A variável que guarda a pontuação e a que controla a energia do 
mergulhador são apresentadas no topo do palco. A pontuação inicia 
em zero quando o jogo começa, mas 100% da energia está 
disponível, conforme podemos observar na próxima figura. 


Pontos Energia 


Figura 11.6: Variáveis de controle de pontuação e energia. 


Por fim, temos o ator que representa a energia na forma de um 
coração. Toda vez que este ator aparecer na cena o mergulhador 
deverá ir em sua direção e capturá-lo, assim obterá mais energia 
para continuar realizando a pesca submarina (veja a figura). 





Figura 11.7: Energia. 


Ao início do jogo, algumas ações devem ser tomadas, como a 
definição do cenário de jogo, apresentação das variáveis de pontos 
e energia, e execução do efeito sonoro de bolhas no jogo. Essas 
ações iniciais devem ser codificadas com um script do cenário. Veja 
a figura: 


quando for clicado 


mude para o cenário und 


mostre a variável Energia * 


mostre a vanável Pontos + 


sempre 





toque o som ll 


espere 5) seg 


+ 


Figura 11.8: Início do jogo. 


O efeito sonoro de bolhas que dá a impressão de que o 
mergulhador está realmente nadando no fundo do rio é tocado a 
cada 5 segundos. Esse controle é realizado pela estrutura de 
repetição do tipo sempre . 


11.2 Movimentação do mergulhador 


A seguir, veremos como controlar o nado do mergulhador, o qual 
responde ao pressionamento das teclas de direção, fazendo com 
que o personagem vá em direção ao fundo do rio, suba à superfície 
ou nade em encontro às margens. 


Durante o mergulho devemos tomar o cuidado de verificar o nível de 
energia associada ao personagem, pois quando estiver esgotada o 
personagem morre e o jogo é finalizado. A figura ilustra o código de 
controle da movimentação do mergulhador. 


Além disso, o mergulhador possui duas fantasias distintas, a 
primeira apresenta o personagem realizando o mergulho em direção 
à direita do rio, enquanto a outra faz com que o personagem seja 
visualizado em direção contrária. Controle dos movimentos do 
mergulhador: 


quando for clicado 


defina o tamanho como 40) o 


mude Energia v para 100, 
mude Pontos * para Co) 


Figura 11.9: Blocos iniciais de controle do mergulhador. 





Os blocos seguintes, representados na próxima figura, 
complementam o código de controle do mergulhador. 


sempre 


tocando em Heart T entao 


transmita toquei no coracao Y 


Energia = o) Energia 


esconda 


apague este clone 


pressionada? 


5E tecla seta para cima * 


adicione E» ay 


tecla seta para baixo * | pressionada? então 


adicione E» ay 


se 


tecla seta para direita ~ | pressionada? então 


mude para a fantasia diverz + 


adicione ga ax 


tecla seta para esquerda entāo 


pressionada? 


mude para a fantasia diver3 w 


adicione 7] ax 


+ 





Figura 11.10: Sequência dos blocos de controle do mergulhador 


O código inicia com a instrução que redimensiona a imagem do 
mergulhador para 40% do tamanho original, seguida das instruções 
para inicialização dos valores das variáveis de controle: energia e 
pontos . No início do jogo, o personagem recebe 100% de sua 
energia, e o número de pontos deverá ser iniciado em zero. 


Uma estrutura de repetição realiza todo o controle das ações do 
mergulhador, que são: aquisição de energia extra, finalização do 
jogo por falta de energia e deslocamento do personagem pela cena. 


A primeira verificação a ser realizada no código é se o mergulhador 
encontrou alguma fonte de energia extra. Isso é realizado com um 
teste baseado na expressão tocando em, a qual verifica se o 
personagem está em contato com o ator coração, que representa a 
sua fonte de energia para o mergulhador. Toda vez que o 
mergulhador apanhar um coração, será enviada a mensagem 
toquei no coração ao ambiente do jogo. Posteriormente, essa 
mensagem será tratada pelo ator que representa a energia. 


Na sequência, a condição de término do jogo é verificada no laço de 
repetição, levando-se em consideração o nível de energia atual do 
personagem. Caso a energia seja menor ou igual a zero, o 
personagem é omitido e excluído da cena. 


Em seguida, vem a verificação dos quatro tipos de movimentos 
possíveis do mergulhador: 


e para cima: um teste é realizado para verificar se a tecla de seta 
para cima foi pressionada, em caso afirmativo devemos 
aumentar o valor da coordenada y do personagem, fazendo 
com que a imagem suba na cena; 

e para baixo: outro teste faz a verificação do estado da tecla de 
seta para baixo, que se pressionada faz com que o personagem 
realize o movimento para baixo, a partir do decremento da 
coordenada y; 


e para direita: um terceiro teste é necessário para verificação da 
tecla seta para a direita, pois permite o controle do movimento 
de mergulho em direção à borda direita da cena pelo acréscimo 
do valor da coordenada x; 

e para esquerda: por fim, também devemos testar se o jogador 
pressionou a tecla de seta para a esquerda, pois esta ação faz 
com que o movimento do mergulhador seja direcionado à 
extremidade esquerda da cena pelo decréscimo da coordenada 
X. 


Note que a aparência do mergulhador muda de acordo com sua 
movimentação durante o mergulho. Caso o mergulhador esteja se 
deslocando para direita da cena ele é apresentado com sua fantasia 
de número 1, caso contrário, a fantasia apresentada é a de número 
2. 


11.3 Movimentação dos peixes 


Tanto o peixe amarelo como o lilás realizam um movimento partindo 
do fundo do rio em direção à margem, entretanto, partem de pontos 
aleatórios. Para isso, fazemos uso de uma instrução para gerar o 
valor da coordenada x, cada vez que um peixe é criado. Vejamos 
como foi criado o script de controle do peixe amarelo, o qual pode 
ser visualizado na figura a seguir. 


quando for clicado 


defina o tamanho como 20, 
defina y fish2 + a 5) 


sempre 


crie clone de este ator * 


espere k seg 


t 





Figura 11.11: Início do código de controle do peixe amarelo. 


Ao iniciar a animação, a imagem é redimensionada em proporção à 
área da cena, portanto, o tamanho do peixe é alterado para 20% do 
tamanho original. A próxima instrução realiza a atribuição de 5 ao 
valor da variável de controle da coordenada y do peixe, cuja 
variável é a y fish2. 


Na base do script, temos a abertura de uma estrutura de repetição, 
cujo objetivo é realizar a criação de novas cópias desse ator a cada 


7 segundos. Essa técnica é utilizada no programa para que a cada 
fração de tempo tenhamos um novo peixe amarelo para ser 
capturado pelo mergulhador, visto que uma determinada cópia já 
pode ter sido capturada, ou chegado à margem do rio. A seguir, a 
figura apresenta o código de tratamento de cada clone criado. 





quando eu começar como um clone 
vá para x: número aleatório entre Es e (222) y: 
mostre 
sempre 
mude yem A | 
tocando em borda + ? então 
esconda 


apague este clone 


tocando em mergulhador + ? então 


defina Pontos + a Pontos + 10) 


esconda 


apague este clone 


I 


Figura 11.12: Controle da criação dos clones de peixe amarelo. 


Quando um novo clone for criado devemos posicionar a imagem na 
cena antes de iniciar a animação referente ao deslocamento do ator. 
Para isso, usamos a instrução vá para, posicionando o peixe em um 
ponto dado pela coordenada x, a qual é gerada aleatoriamente a 
partir de um valor entre -222 e 222 pixels e, na coordenada y 
sempre na posição -169. Após o posicionamento devemos mostrar o 
personagem na tela. 


A próxima instrução do código realiza todo controle de 
movimentação do personagem na cena. Isso é realizado por uma 
estrutura de repetição que, a cada iteração, faz o incremento do 
valor da coordenada y pelo fator informado na variável y_fisn2. 
Essa constante foi definida com o valor 5, fazendo com que a cada 
repetição a imagem seja deslocada de cinco em cinco pixels para 
cima. Podemos aumentar o valor do deslocamento pela modificação 
da variável. 


A primeira decisão a ser tomada no interior do bloco de repetição 
está relacionada ao controle do limite de deslocamento do peixe, 
visto que deve nadar somente até atingir a margem superior da 
cena. Portanto, um teste verifica essa condição e, caso seja 
atingida, devemos ocultar o personagem na cena e remové-lo. 


A próxima instrução verifica se o peixe está em contato com o 
mergulhador, neste caso o peixe está sendo capturado e devemos 
tomar algumas providências. A primeira instrução a ser realizada é a 
emissão do efeito sonoro de captura do peixe, o som pop. Também 
devemos realizar o incremento na pontuação do jogador, pois toda 
vez que o peixe amarelo é capturado devemos acrescentar 10 
pontos na variável de controle. Finalizando o script, o personagem é 
omitido na cena e seu clone é destruído. 


O peixe lilás tem um comportamento semelhante ao peixe amarelo, 
desde o processo de inicialização de seus parâmetros, como 
podemos observar na figura, até o controle de criação de clones. 


quando for clicado 


defina yfishi* a E 


sempre 


crie clone de este ator + 


espere O seg 


> 





Figura 11.13: Inicialização do peixe lilás. 


Note que temos somente duas diferenças em relação ao código do 
peixe amarelo: a definição da variável y fish1, que controla o fator 
de incremento da coordenada y , fazendo com que o peixe realize o 
nado em direção à margem do rio, bem como o tempo de espera 
para criação de novas cópias do peixe. 


Outra diferença em relação ao peixe amarelo está no script de 
controle de criação de clones, visto que o teste de verificação da 


captura do peixe pelo mergulhador deve acrescentar 5 pontos a 
cada vez que o peixe for atingido pelo mergulhador. 


11.4 Movimentação dos inimigos 


Vamos analisar o comportamento do peixe enfezado, que inicia com 
o script de preparação apresentado na figura. O código parte da 
definição do tamanho do personagem, cuja imagem é 
redimensionada em 20% do tamanho original para adequação às 
dimensões do cenário. Logo, a variável de controle do fator de 
deslocamento é definida em 10, fazendo com que o personagem 
ande em 10 pixels por vez. Então, é implementada uma estrutura de 
repetição que realiza a criação de um clone do personagem a cada 
10 segundos. 


quando for clicado 


defina o tamanho como (20 
defina x fish3 a 10) 


sempre 


espere 10) seg 


crie clone de este ator + 





Figura 11.14: Inicialização do peixe enfezado. 


A seguir, veremos o código de controle do processo de criação de 
clones do peixe enfezado. A figura apresenta os blocos iniciais. 


quando eu começar como um clone 


vá para x: [-223) y: número aleatório entre 162) e [-162) 


mostre 





Figura 11.15: Controle dos clones do peixe enfezado, blocos iniciais. 


A próxima figura apresenta os blocos finais, que complementam a 
ação de controle do processo de criação dos clones. 


sempre 


adicione x fish3 ax 


tocando em borda v ? então 


esconda 


apague este clone 


tocando em mergulhador +» ? então 


mude Energia + para Energia -O 


esconda 
Energia < É ou Energia 
mude para o cenário underwater2 vw 


apague este clone 


3) 





Figura 11.16: Controle dos clones do peixe enfezado, blocos finais. 


Quando ocorre o evento de criação do clone, o personagem é 
posicionado na cena com a coordenada x como valor -233 e a 
coordenada y com um valor aleatório entre 162 e -162, que são os 
limites verticais da cena, e depois o personagem é apresentado na 
tela. 


Uma estrutura de repetição é aberta para o controle das ações do 
peixe enfezado, cuja primeira instrução é o incremento da 
coordenada x pelo fator definido na variável x_fish3 . Caso o peixe 
tenha chegado à borda da cena, devemos esconder o personagem 
e remover o clone do jogo. 


A próxima instrução verifica se o personagem atingiu o mergulhador. 
Neste caso o efeito sonoro chomp é emitido, indicando a colisão 
entre os atores. Também é realizado o decremento da variável de 
controle da energia e o personagem é omitido da cena. 


Logo a seguir, temos uma outra estrutura de tomada de decisão 
aninhada, a qual verifica se a energia do mergulhador já foi 
esgotada. O teste verifica se a variável energia possui um valor 
menor ou igual a zero e, em caso afirmativo, o efeito sonoro alien 
creak2 é tocado e o cenário apresentado é O underwater2 . Ao final do 
código, o clone é removido. 


A criação do caranguejo vermelho é controlada pelo script 
apresentado na próxima figura, que inicia com a definição do 
tamanho do ator, seguido do posicionamento do elemento gráfico na 
cena, cuja coordenada x é gerada aleatoriamente, a partir de um 
valor entre -220 e 220, enquanto a coordenada y é sempre -170. A 
cada 10 segundos uma nova cópia de um caranguejo vermelho é 
criada. 


quando for clicado 


defina o tamanho como 20, n 
vā para x número aleatório entre | -220 | e Y [170] 


sempre 


crie clone de este ator + 





Figura 11.17: Processo de criação do caranguejo vermelho. 


Após a criação de um clone do caranguejo, o evento quando eu 
começar com um clone é disparado, conforme podemos observar na 
figura. O script inicia com a apresentação do ator na cena e, na 
continuação do código, a estrutura de repetição sempre é utilizada 
para controlar todo o comportamento do personagem. Script de 
controle do caranguejo vermelho inicia com os seguintes blocos: 


quando eu começar como um clone 


mostre 





Figura 11.18: Controle do caranguejo vermelho, blocos iniciais. 


A sequência de blocos de controle do caranguejo vermelho é 
apresentada na próxima figura. 


sempre 


aponte para mergulhador + 






NEVER 10 Mit 


tocando em raio * 7 então 


esconda 


apague este clone 


ra 


tocando em | mergulhador * 7 


mude Energia + para Energia 20 


Energia = Lo) ou Energia = É 


mude para o cenário  underwater2 + 
esconda 


apague este clone 


espere Los) seg 


+ 


Figura 11.19: Controle do caranguejo vermelho, blocos finais. 


O caranguejo vermelho inicia apontando para o mergulhador, visto 
que realizará seu deslocamento sempre em direção ao seu alvo, 
sendo que a movimentação do personagem é realizada a cada 10 
passos. 


As próximas instruções realizam uma série de tomada de decisões, 
pois devemos verificar se o ator foi atingido pelo raio, ou se 
conseguiu atingir o mergulhador. A primeira verificação realizada é 
se o caranguejo foi atingido pelo raio emitido pelo mergulhador. 
Caso isso ocorra, um efeito sonoro é emitido, indicando o acerto, 
então o personagem é escondido e seu clone é removido da cena. 


A investida do caranguejo ao mergulhador é verificada no próximo 
teste, se atingir seu objetivo é tocado o som chomp e a energia do 
mergulhador é reduzida em 20 pontos. Como ocorreu uma mudança 
no valor da energia, um teste para verificar se for menor ou igual a 
zero é realizado. Se isso for verdadeiro, o efeito indicando que o 
jogador foi morto é tocado e o cenário é alterado para a imagem 
underwater2 , que é o cenário de final de jogo. Dessa forma, o 
personagem é escondido para não aparecer mais no cenário e, 
após, seu clone é destruído. 


Quando a condição de final de jogo não é atingida, o processamento 
do script é retardado por 5 décimos de segundo e todas as 
instruções do laço de controle são repetidas novamente. 


11.5 Ataque ao caranguejo 


Há a possibilidade de o mergulhador atingir o caranguejo com sua 
arma letal, o raio da morte. O raio é disparado com o 
pressionamento da tecla de espaço, mas devemos estar com o 
mergulhador bem próximo do alvo, pois o alcance é limitado. 


Não há limite de uso do raio, pois ele nunca esgota, fique à vontade 
para disparar a arma sempre que estiver em uma situação de 
perigo. A figura apresenta o código de preparação do ator no 
momento do início de execução do programa. 


quando for clicado 


defina o tamanho como 60) “o 


esconda 





Figura 11.20: Ajustes iniciais do raio da morte. 


O tamanho da imagem que representa o raio é ajustado para 60% 
de seu tamanho original, seguido da instrução que omite o 
personagem na tela, visto que só deverá aparecer quando acionado 
pelo jogador. 


Toda vez que o mergulhador se deslocar pelo cenário, o raio deverá 
ser reposicionado, pois deve acompanhar as coordenadas de tela 
do mergulhador, já que quando for acionado deverá surgir em tomo 
do personagem. Para tomar isso mais fácil de controlar, sempre que 
o jogador pressionar alguma tecla, o raio deverá acompanhar o 
mergulhador, o que é realizado no código apresentado na figura. 


quando a tecla qualquer * for pressionada 


va para mergulhador + 





Figura 11.21: Posicionando o raio na cena. 


O disparo do raio é realizado quando o jogador pressiona a tecla de 
espaço, conforme podemos observar no script da figura. 


quando a tecla espaço + for pressionada 


mostre 


toque o som zoop * 


espere 05) seg 


esconda 





Figura 11.22: Disparo do raio da morte. 


O processo de disparo inicia com o personagem sendo apresentado 
na tela e, em seguida, o efeito sonoro zoop é tocado, simulando o 
barulho de um laser. Após o surgimento do raio e seu som, ocorre 
um retardamento de 5 décimos de segundo no processamento do 
programa e a imagem é omitida da cena. 


11.6 Energia extra 


A cada período de tempo surge no cenário o elemento gráfico 
coração, o qual é fonte de energia para o mergulhador. Sempre que 
o objeto for tocado será acrescentada uma quantidade de energia 
extra para a realização da pesca submarina. A figura seguinte 
apresenta o código de preparação do ator. 


quando for clicado 


defina o tamanho como 115) So 
defina tempo * a O 


sempre 


espere (45) seg 


crie clone de este ator * 





Figura 11.23: Preparação do ator de energia extra. 


O script começa com o redimensionamento do personagem, 
seguido da definição da variável denominada tempo, a qual é 
utilizada para controle do período que o personagem será 
apresentado na tela ao jogador. A próxima instrução é uma estrutura 
de repetição que realiza a criação de um novo clone do ator a cada 


15 segundos. Após a criação de um novo clone do personagem o 
código da figura é disparado. 


quando eu começar como um clone 


vá para x: número aleatório entre [-222) e [222) y: número aleatório entre [162] e [162 ) 





repita até que tempo 


mude y em O 
mude tempo * para o 


espere O seg 


apague este clone 


Figura 11.24: Controle da movimentacáo do clone de energia. 


O código tem início com o posicionamento do ator nas coordenadas 
geradas de forma aleatória, tanto a coordenada x como a y, 
depois a imagem da fonte de energia é apresentada na cena. 


Uma estrutura de repetição do tipo repita até é criada para 
controlar o tempo em que o coração ficará visível na cena, bem 
como, o deslocamento do personagem. Enquanto não for atingido o 
tempo de 5 segundos, o personagem fica visível na tela. Após esse 
tempo, o coração fica oculto e o clone é removido da cena. 


O próximo script do personagem é o controle do evento quando 
receber a mensagem , Que neste caso definirá o que deverá ser feito 


quando o mergulhador capturar o coração. Esse comportamento 
está descrito no código apresentado na próxima figura. 


quando eu receber toquei no coracao vw 


toque o som laseri w 


defina tempo w a o) 
Energia + (10) < (100) ou Energia + [10] = [100 ) então 


mude Energia + para (10) 


apague este clone 





Figura 11.25: Controle da movimentação do clone de energia. 


O tratamento do evento começa com o toque do efeito laser1, 
indicando que o personagem foi tocado pelo mergulhador. Dessa 
forma, a variável de controle do tempo de permanência de tela do 
coração é zerada, visto que um novo ciclo será iniciado. A próxima 
instrução realiza uma verificação do valor presente na variável 
energia , pois se já está com o valor 100 significa que está cheia e 
não é necessário mais acrescentar energia. Caso contrário, a 
instrução seguinte faz o acréscimo de 10 unidades no valor da 
energia do mergulhador. Finalizando o script o personagem é 
omitido e removido da cena. 


11.7 Fim de jogo 


Ao final do jogo é apresentado o cenário de encerramento ao 
jogador, o qual tem a aparência ilustrada na próxima figura. O jogo 
vai finalizar sempre que a energia do jogador for esgotada. Alguns 
controles são realizados ao longo do jogo para verificar essa 
condição que, caso ocorra, faz com que a tela de encerramento 
surja. 


Ops. acabou a energia! 





Figura 11.26: Cenário de encerramento do jogo. 


Quando for apresentado o cenário de encerramento do jogo é 
disparado o evento ilustrado na figura, o qual realiza o adiamento do 
processamento do programa em 3 décimos de segundo e, após, 
esconde as variáveis de controle de pontuação e energia. Por fim, 
encerra a execução de todos os scripts de código que estejam em 
execução até o momento. 


quando o cenário mudar para underwater? + 


Espere 10.3) seg 


esconda a variável Energia * 


esconda a variável Pontos * 


pare todos + 





Figura 11.27: Evento de troca do cenário. 


CAPÍTULO 12 
Jogo Invasão dos Insetos 


Nosso último jogo apresenta a jomada de Grimm e seu desafio 
contra os insetos invasores. O personagem precisa voar até seu 
destino, mas durante o trajeto enfrentará o ataque feroz de seus 
inimigos. Os insetos invasores tentarão impedir Grimm de chegar a 
seu destino, seja investindo em direção ao personagem, ou atirando 
gosmas tóxicas contra o aviador. Veja a aparência do cenário do 
jogo ilustrado na próxima figura. 





Figura 12.1: Cenário do jogo Invasão dos Insetos. 


O avião de Grimm é posicionado na extremidade esquerda do 
cenário do jogo e realiza um deslocamento vertical para evitar a 
colisão com os insetos. Para movimentar o avião, o jogador deve 
usar as setas de direção: para cima ou para baixo, do teclado. 


O disparo contra os insetos é realizado com o pressionamento da 
tecla de barra de espaço do teclado, mas note que nem sempre um 
único tiro é suficiente para eliminar o inimigo. Uma rajada de tiros 
sempre é mais apropriada para garantir o êxito na eliminação de um 
inseto. 


Os insetos surgem de forma aleatória, mas sempre partindo da 
extremidade direita do cenário. Alguns realizam uma trajetória de 
deslocamento horizontal em direção ao outro extremo da tela, outros 
realizam uma rota em direção ao avião, visando sempre atingir seu 
alvo. 


A cada acerto realizado pelo jogador é realizada a acumulação de 
pontos, os quais são apresentados no topo do cenário. Também há 
um controle da energia do aviador, onde a cada colisão com um 
inimigo, ou quando for atingido pela gosma letal, uma unidade é 
subtraí da, fazendo-se com que a barra de energia seja alterada. 
Muito cuidado para não esgotar toda a energia disponível, pois não 
será possível recarregá-la ao longo do jogo. 


O jogo chega ao fim de duas formas: na primeira forma, a mais 
desagradável, ocorre quando esgota a energia do jogador antes de 
finalizar a missão; já a segunda maneira de finalizar o jogo é tentar 
vencer o grande boss, que surgirá um pouco antes de o aviador 
chegar ao seu destino. Muitos tiros e desvios de ataques serão 
necessários para que o grande boss seja derrotado. 


Experimente a aventura, jogando de forma online, ou faça o 
download do jogo para o seu computador, disponível no site do 
autor em: https://scratch.mit.edu/projects/412096401/ 


12.1 Os elementos gráficos do jogo 


A seguir, veremos o processo de criação, ou obtenção de cada 
elemento presente no projeto. Como vimos, o jogo é composto por 


um personagem principal, o aviador, alguns insetos que são os 
inimigos, elementos gráficos que representam a energia e 
pontuação do jogador, imagens para representar os tiros, tanto do 
personagem principal como do inimigo, e a imagem que compõe o 
plano de fundo. Comecemos pela descrição do personagem 
principal de nosso jogo, o qual possui três fantasias, conforme 
podemos observar na figura. 





Figura 12.2: As fantasias do avião. 


A primeira fantasia (A) representa o primeiro estado do voo e a 
segunda fantasia (B), o segundo estado. Os estados do voo são 
altemados a cada fatia de tempo, para que possamos ter a 
perspectiva de movimentação das hélices da aeronave. Além disso, 
um som característico das hélices é emitido durante o trajeto. A 
terceira fantasia (C) representa o estado do avião quando o jogador 
realiza o tiro. 


A imagem do aviador e do plano de fundo do cenário foram obtidas 
no site Game 2D, o mesmo utilizado para obtenção da imagem do 
ninja em um exemplo anterior. Todos os demais recursos gráficos 
foram obtidos na própria galeria de Scratch, ou criadas no editor 
gráfico do ambiente. A figura apresenta a aparência da cena do 
aviador realizando um tiro no inimigo, sendo disparado um projétil 
na cor amarela e formato cilíndrico. 





Figura 12.3: Aviador atirando no inimigo. 


O primeiro inimigo que surge em ataque ao nosso personagem 
principal é o besouro, cujas imagens podem ser observadas na 
figura. Veja que o inseto possui duas fantasias, que são altemadas 
enquanto o movimento de deslocamento do besouro em direção à 
extremidade esquerda da tela é realizado. 


e e 


Figura 12.4: Fantasias do besouro. 


Outro inimigo presente no jogo é o borboletáo. Veja a figura, este 
personagem também possui duas fantasias, que sáo altemadas 
para simulação do voo em direção à extremidade esquerda da tela. 


dp, Po 


Figura 12.5: Fantasias do borboletão. 





O próximo inimigo é a cigarra errante que, na verdade, são duas: a 
primeira cigarra parte da base do cenário e realiza um movimento 
de deslocamento em direção ao aviador, visando atingir seu alvo de 
qualquer forma; a segunda cigarra parte do topo do cenário, 


deslocando-se para a posição onde se encontra o aviador até o 
atingir. A única forma de evitar a colisão com alguma cigarra é 
acertar o alvo com um tiro. A figura mostra a aparência das cigarras 


errantes. 


Figura 12.6: Cigarras errantes. 


Cada ator que representa as cigarras também possui duas fantasias 
associadas e, durante a movimentação dos insetos pelo cenário, as 
imagens são altemadas para simulação do bater das asas ao longo 
do voo de investida ao aviador. 


O último inimigo, talvez o mais perigoso, é o grande boss, que é um 
personagem que surge ao final do jogo, realizando um movimento 
de descida e subida de forma altemada no cenário. Enquanto 
realiza seus movimentos faz disparos de uma gosma tóxica em 
direção ao aviador. Tente, quando possível, desviar-se das gosmas 
para não causar danos na aeronave e perder energia. Este é o 
inimigo mais resistente e que vai exigir mais paciência na batalha. 
Para derrotá-lo será necessário realizar muitos disparos. Na figura 
podemos ver como o grande boss se parece. 





Figura 12.7: O grande boss. 


As gosmas tóxicas são disparadas frequentemente pelo inimigo, 
conforme podemos observar na próxima figura, a qual apresenta o 
personagem realizando seu disparo contra o aviador. O 


deslocamento da gosma é sempre horizontal, possibilitando que o 
aviador desvie, evitando a colisão. 





Figura 12.8: Gosma tóxica disparada pelo grande boss. 


Todos os personagens que compõem o grupo de inimigos do 
aviador possuem uma fantasia adicional, que é o borrão. O borrão 
sempre será apresentado no cenário quando ocorrer a morte do 
inimigo, substituindo a fantasia original do personagem. O borrão é 
apresentado por uns instantes e, após, o personagem é removido 
da cena. A figura apresenta o efeito da eliminação do inimigo. 


Figura 12.9: Borrão indicando a eliminação do inimigo. 


A barra de energia do aviador é apresentada na figura. Ela fica 


visível na extremidade esquerda do topo do cenário e possui três 
variações de cores: 


e verde: nível de excelente de energia; 


e amarelo: nível intermediário de energia; 
e vermelho: nível crítico de energia. 


Energia DO A 


Figura 12.10: Barra de energia. 


O rótulo de texto Energia também foi elaborado na ferramenta de 
edição gráfica de Scratch, onde foi inserido o texto, cuja fonte de 
caracteres foi a Pixel. Cada nível de energia possui três graduações, 
que diminuem toda vez que o aviador colidir com algum inimigo ou 
for atingido pela gosma tóxica disparada pelo grande boss. 


A cada dano causado no aviador uma graduação é retirada da 
barra. Para representar os níveis de energia foram elaboradas, 
usando-se o editor gráfico, nove fantasias, conforme podemos 
verificar na figura seguinte. 





Figura 12.11: Níveis de energia ao longo do jogo. 


A fantasia da barra de energia é alterada sempre que o avião for 
atingido, refletindo o valor da variável de energia, a qual vai 
decrescer a cada colisão. Finalizando o conjunto de elementos 
gráficos presentes no jogo, temos a imagem que apresenta a 
pontuação do jogador, conforme podemos observar na figura, a qual 


também é um texto elaborado no editor gráfico. Ao lado do texto 
pontos temos a visualização da variável de pontuação. 


Pontos 


Figura 12.12: Imagem referente a pontuação do jogador. 





A figura seguinte apresenta o cenário do jogo, em tempo de 
construção do projeto, bem como, cada elemento gráfico utilizado 
durante a execução da aplicação. No painel de atores podemos 
observar os atores e seus respectivos nomes. 








Figura 12.13: Projeto dos elementos gráficos do jogo. 


12.2 Animação do cenário 


Durante a execução do jogo ocorre uma animação do plano de 
fundo do cenário, onde a paisagem é deslocada continuamente para 
a extremidade esquerda da tela, dando a ideia de que o avião está 
realizando o voo de fato. 


Para a realização do efeito visual foram utilizadas duas imagens 
idênticas, uma colocada ao lado da outra, sendo que ao início do 
jogo a primeira imagem ocupava toda região do palco, visto que 
possuía as mesmas dimensões da área ocupada pelo cenário. Para 
que a outra imagem fosse colocada ao lado da primeira, sua 
coordenada x foi ajustada com o valor 480 pixels, mas na mesma 
altura da primeira imagem, cujo valor da coordenada y foi em zero 
pixels, representando o topo do palco. Veja a figura que apresenta 
as duas imagens lado a lado. 





Área do palco Fora da área do palco, à direita 


Figura 12.14: Efeito de movimento da imagem de fundo. 


O efeito de movimentação ocorre quando o jogo é iniciado, os 
deslocamentos das imagens são realizados em paralelo. O código 


apresentado na próxima figura demonstra o comportamento de 
movimentação da primeira imagem de fundo, onde a primeira 
instrução faz com que a imagem seja enviada para segundo plano, 
pois os demais elementos do jogo devem aparecer no primeiro 
plano, tais como: o aviador, inimigos e demais elementos visíveis. 


quando for clicado 


Va para a camada detrás + 


va para X: O y: O 


sempre 


mude x em O 


AA 0.001 Me 
posição x = [465 então 
defina x como 





Figura 12.15: Script de deslocamento da primeira imagem. 


A próxima instrução realiza o posicionamento da imagem na área do 
palco. Note que a primeira imagem deverá ocupar toda a dimensão 
do palco e será a primeira que o jogador vai visualizar no momento 
em que o jogo for iniciado. Para isso, devemos posicionar a primeira 
imagem ajustando as coordenadas x e y emzero. 


Logo a seguir, inicia-se uma estrutura de repetição que fará o 
controle de deslocamento da imagem, fazendo com que o elemento 
gráfico suma gradualmente na borda esquerda do palco. Esse efeito 
é realizado pelo decremento do valor presente na coordenada x da 
imagem, realizando sua movimentação horizontal a cada 1 milésimo 
de segundo. 


Um teste para verificar se a imagem já atingiu a distância máxima 
de deslocamento, neste caso, será o momento em que atingir o 
valor -465 para a coordenada x, então a imagem é reposicionada 
para fora da extremidade direita da tela, dando lugar à segunda 
imagem que será apresentada no jogo. 


O script da segunda imagem é muito semelhante ao da primeira, 
mas com algumas particularidades que fazem muita diferença. Para 
começar, quando se inicia o jogo, a imagem é posicionada para fora 
da área visível do palco, junto à extremidade direita da tela, na 
região logo após a área onde se encontra a primeira imagem. 
Portanto, a coordenada x da segunda imagem é ajustada com o 
valor 480. 


O restante das instruções que compõem o código de deslocamento 
da segunda imagem pelo palco é o mesmo apresentado para a 
primeira, visto que são executados em paralelo e possuem um 
comportamento semelhante. A figura apresenta o código associado 
a animação da segunda imagem. 


quando for clicado 


Va para a camada detrás + 


vá para x: y: O 


sempre 


mude x em Es 


espere | 0.001 Meio 


se posição x 


defina x como 





Figura 12.16: Script de deslocamento da segunda imagem. 


12.3 Movimento do avião 


O efeito visual de voo do avião é realizado pela altemância das 
fantasias associadas ao elemento gráfico. Como vimos, são duas as 
fantasias apresentadas durante o voo, as quais são intercaladas a 
cada fração de segundo, de modo que o jogador tem a impressão 
de que as hélices estão em funcionamento. Em paralelo à 
movimentação das hélices, é apresentado um efeito sonoro 
equivalente ao funcionamento do motor. A figura apresenta o código 
que é executado quando o jogo é iniciado. 


quando for clicado 


avax €D O 


sempre 
NA 0.001 Mis 
fantasia número + 


mude para a fantasia voando? 
senão 


mude para a fantasia voando 


se tecla seta para cima * pressionada? 


mude y em 5) 


se tecla seta para baixo * pressionada? 


mude y em O 


JJ 


então 


então 





Figura 12.17: Controle de voo do avião. 


O script inicia com o posicionamento de partida da aeronave, mais 
ou menos no centro do cenário do jogo. Na próxima instrução temos 
a abertura da estrutura de repetição que vai controlar o movimento 
do avião, conforme a interação do jogador através das setas de 
direção para cima ou para baixo. A cada milésimo de segundo, uma 
série de verificações é realizada, enquanto o jogo não chegar ao 
fim. A primeira verificação faz o controle da troca de fantasias do 
personagem: caso a fantasia atual do avião seja a primeira, troca-se 
pela segunda e vice-versa. 


Os próximos testes avaliam se o jogador pressionou alguma tecla 
de direção no teclado. Caso tenha sido pressionada a tecla para 
cima, devemos adicionar 5 pixels na coordenada y do avião, 
fazendo com que ele voe para cima. O jogador pode ter pressionado 
a tecla para baixo, neste caso, devemos remover 5 pixels da 
coordenada x do avião, assim será realizado o movimento de 
descida. 


Além disso, outro código que é executado no momento em que o 
jogo começa é o toque do efeito sonoro referente ao funcionamento 
do motor do avião, o qual deve ser tocado continuamente, enquanto 
o jogo esteja em execução. Veja a figura. 


quando for clicado 


sempre 


toque o som voo * 





Figura 12.18: Efeito de funcionamento do motor. 


12.4 Tiro de canhão 


Quando o jogador pressionar a tecla de espaço no teclado, ela 
desencadeia uma série de scripts no aviador e no ator que 
representa o projétil. Todos os códigos associados ao tiro partem do 
evento toque na tecla de espaço e São sincronizados para que tudo 
ocorra de forma que o efeito de disparo seja apresentado no avião e 
o projétil seja lançado em direção ao alvo almejado pelo jogador. 
Iniciamos a explanação do processo envolvido no disparo pelo script 
do avião. Veja a figura que apresenta o código. 


quando a tecla espaço * for pressionada 


mude para a fantasia atirando + 


defina tirox* a  posiçãox T 50) 


defina tiro y * a posição y O 





Figura 12.19: O tiro sendo realizado pelo aviador. 


A primeira instrução do código realiza a troca da fantasia do ator 
para a aparência do avião realizando o disparo. Logo a seguir, as 
variáveis que serão utilizadas para o posicionamento do projetil na 
tela são inicializadas. A variável tiro x, que identifica a coordenada 
de tela x, assume o valor atual da coordenada x do avião mais 50 
pixels, enquanto a variável tiro y, utilizada para referenciar a 
coordenada y, recebe o valor atual da coordenada y do avião mais 
5 pixels. Essa técnica foi utilizada para que o projétil seja 
centralizado em relação à imagem do avião. 


O próximo script, que ocorre em paralelo ao anterior, foi definido no 
ator que representa o projétil, o qual também inicia no momento em 
que o jogador pressionar a tecla de espaço do teclado. Neste caso, 
quando o evento ocorrer será tocado um efeito sonoro que lembra 
um disparo do canhão do avião e, na sequência, um clone do projétil 
é criado. A figura mostra como ocorre esse comportamento. 


quando a tecla espaço * for pressionada 


toque o som tiro * 


crie clone de este ator + 





Figura 12.20: Criando o projétil na cena. 


Por fim, o último script apresentado será disparado no momento em 
que o novo clone for criado, ou seja, ao final da execução do script 
apresentado anteriormente. Veja a figura que apresenta a primeira 
parte das instruções. 


quando eu começar como um clone 


vá para x:  firo_x 


mosie 


apague este clone 


tocando em besouro + 


adicione E a "" 


apague este clone 





Figura 12.21: Controle do deslocamento do projétil - primeira parte. 


Na sequência, veja a ilustração que apresenta a continuação dos 
blocos que compõem a criação de um novo clone do projétil. 


EE tocando em  boboletao + 


adicione O a pontos + 


apague este clone 


tocando em  cigaral + o? ou ~ tocando em cigama? ~ 7 então 


adicione o a pontos * 


apague este clone 


tocando em boss + ? então 


adicione a dano boss * 


adicione a pontos * 


apague este clone 





Figura 12.22: Controle do deslocamento do projétil - segunda parte. 


A primeira instrução é utilizada para o posicionamento do projétilno 
cenário, de acordo com as coordenadas previamente definidas e 
obtidas a partir das variáveis tiro x € tiro y, então o elemento 
gráfico é apresentado na cena de jogo. 


Na sequência, a estrutura de repetição é inserida no código para 
fazer o controle do comportamento de deslocamento do projétil na 
cena, o qual vai ocorrer a cada milésimo de segundo, fazendo-se 
uma variação do valor da coordenada x do objeto com o 


incremento de 5 pixels. Dessa forma, o projétil vai realizar um 
movimento de deslocamento horizontal em direção à extremidade 
direita do cenário, indicando o disparo. 


A cada movimento do projétil na cena devemos verificar se o objeto 
atingiu a borda do cenário, pois se isso acontecer temos que 
remover o clone do jogo, ele não é mais útil porque não conseguiu 
acertar algum alvo. Caso contrário, devemos realizar vários testes 
para verificar qual alvo foi atingido. 


O primeiro teste verifica se alguma cópia do besouro foi atingida, 
neste caso, devemos acrescentar 3 pontos na variável de pontuação 
do jogo e o clone é removido da cena, pois já atingiu seu objetivo. O 
mesmo ocorre para os demais inimigos do nosso aviador: o 
borboletão e as cigarras. O comportamento do teste de eliminação 
do borboletão é semelhante ao do besouro, com a diferença em 
relação à pontuação, pois o acerto em um borboletão vale 5 pontos. 


A verificação do acerto em uma das cigarras é realizado por um 
teste composto, onde usamos o conectivo lógico da disjunção ou 
para testar duas condições, ou seja, se o projétil tocou a cigarrai OU 
se tocou a cigarraz . Se alguma dessas condições for verdadeira 
são somados 7 pontos ao jogador e o clone é removido da cena. 


O último teste a ser realizado verifica se o projétil atingiu o 
personagem boss, O inimigo maior. Nesse caso, o ataque funciona 
de forma diferente, visto que este inimigo é mais poderoso e possui 
mais energia que os demais. A energia do grande boss é diminuída 
a cada acerto do projétil, portanto será decrementada uma unidade 
da variável dano boss cada vez que o jogador obtiver êxito. Além 
disso, a pontuação deverá ser atualizada, pois a cada acerto mais 
10 pontos devem ser creditados ao jogador. No final, assim como 
nos ataques aos demais alvos, quando atingir seu objetivo o projetil 
é removido da cena. 


12.5 O besouro 


O primeiro inimigo que vamos abordar será o besouro, o qual realiza 
um movimento horizontal, surgindo da margem direita do cenário e 
se deslocando sempre no sentido contrário, em direção à margem 
onde se encontra o aviador. 


O movimento do personagem não é tão agressivo quanto outros 
inimigos presentes no jogo, pois sua investida não é direcionada 
diretamente ao aviador. O aviador pode se tomar um alvo eminente 
se cruzar o caminho do besouro durante sua a realização de sua 
trajetória em direção à borda do cenário. 


Um novo clone do personagem é criado constantemente, a partir de 
um certo período de tempo, dando um espaçamento para geração 
desse inimigo no decorrer do jogo. A figura apresenta o código de 
controle da criação de novas cópias do personagem. 


quando for clicado 


esconda 
sempre 


crie clone de este ator + 


espere O seg 


J ; 





Figura 12.23: Script de criação de clones do borboletão. 


O processo de criação de clones do besouro inicia com a instrução 
que faz o personagem ficar visível no jogo, em seguida, uma 
estrutura de repetição é lançada para criação dos clones a cada 5 
segundos. Após a criação do novo clone o evento quando eu começar 
como um clone é executado, conforme podemos observar na figura. 


quando eu começar como um clone 


mude para a fantasia —besourol * 


mostre 


vá para x: 212) y número aleatório entre e 147) 


sempre 


adicione E» ax 
se fantasia número = = ae 





mude para a fantasia besouro? + 


senao 


mude para a fantasia —besourol * 


tocando em borda * T 


apague este done 


tocando em tiro e T então 


mude para a fantasia borrao + 


espere Las) seg 


apague este clone 


Figura 12.24: Controle do comportamento do besouro, parte 1 


A sequência de instruções é apresentada na próxima figura, onde 
vemos o controle de repetição que determina o comportamento do 
personagem. 


tocando em borda + 7 


apague este clone 


tocando em tiro 


mude para a fantasia borrao * 


espere (0.5) seg 


apague este clone 


tocando em avião + 
transmita tocou avião + 


mude para a fantasia borrao * 


espere (0.5) seg 


apague este clone 


espere (01) seg 


> 





Figura 12.25: Controle do comportamento do besouro, parte 2 


A primeira instrução a ser realizada é a alteração da fantasia para a 
besouro1 . Depois o personagem fica visível na cena e sua posição é 
ajustada na tela. A coordenada x é sempre a mesma, mas a 
coordenada y é gerada de forma aleatória a cada criação de um 
novo clone, fazendo com que o personagem não apareça sempre 
no mesmo local. 


Dando continuidade ao código, como de costume, uma estrutura de 
repetição é criada para controlar o comportamento de 
movimentação do besouro pelo cenário. A movimentação é 
realizada pela modificação do valor da coordenada x do 
personagem a cada fatia de tempo. 


Na estrutura de repetição é realizada uma série de testes para 
tomada de decisões, iniciando pelo teste que verifica qual a fantasia 
atual do besouro, pois, se estamos apresentando a primeira 
fantasia, após a movimentação do ator devemos modificar a fantasia 
para besouro2 e vice-versa. Essa técnica de programação será 
utilizada para simular a movimentação do inimigo durante seu 
deslocamento. 


Outra tomada de decisão é necessária para evitar que o besouro 

ultrapasse os limites do cenário. Para isso devemos verificar se a 

borda foi ou não atingida pelo personagem e em caso afirmativo o 
seu clone deverá ser removido do jogo. 


Na próxima estrutura de tomada de decisão é verificado se o 
personagem foi atingido pelo tiro de canhão do avião. Se isso 
ocorrer, devemos representar a aniquilação do inseto, fazendo com 
que ele suma de cena. Para isso, primeiramente é alterada a 
fantasia para O borrão , O qual significa que o inimigo foi explodido 
quando o projétil o atingiu. Um efeito sonoro auxiliar é tocado e o 
processamento do script é retardado em 5 décimos de segundo, 
finalizando-se o código presente no teste com a exclusão do clone 
da cena. 


O último teste realizado neste script é verificar se o besouro atingiu 
o avião, o que também faz com que o personagem deva ser 
eliminado da cena, portanto a fantasia do borrão novamente é 
apresentada e o efeito sonoro característico do personagem é 
emitido, então o processamento é retardado por 5 décimos de 
segundo, culminando na exclusão do besouro da cena. 


As instruções contidas na estrutura de repetição serão executadas 
novamente, após o controle dos testes apresentados nos parágrafos 
anteriores, mas somente depois de 1 décimo de segundo de atraso 
no processamento. 


12.6 O borboletão 


Nosso segundo inimigo é o borboletão, o inseto bizarro, que 
também possui um movimento de deslocamento horizontal, partindo 
de uma posição aleatória da margem direita do cenário, indo em 
direção à margem onde se encontra o avião. 


Esse personagem também não possui um comportamento muito 
agressivo, da mesma forma que o besouro, pois não realiza um 
ataque direto, somente é nocivo quando tocado pelo avião durante o 
seu deslocamento, portanto tenha muito cuidado e tente desviar da 
trajetória do inseto, evitando perder energia. 


Os clones do borboletão são criados no momento que o jogo inicia, 
uma cópia por vez é criada a cada 8 segundos. Note que o tempo 
de criação deste inimigo é maior que o tempo de criação dos 
besouros, assim evitamos poluir muito o cenário com inimigos, o 
que poderia dificultar muito a ação de combate. 


O script apresentado na figura ilustra o processo de criação dos 
clones de um borboletão. Vejamos a descrição de cada instrução 
envolvida. 


quando for clicado 


esconda 
sempre 


crie clone de estealor + 


espere 8) seg | 


E 





Figura 12.26: Criação de clones do borboletão. 


Note que o código não é muito diferente do processo de criação de 
clones do besouro, pois inicialmente o personagem é omitido da 
cena e, em seguida, uma estrutura de repetição gera novos clones 
do borboletão a cada 8 segundos. A única diferença está no 
intervalo de criação do inseto. Após a criação do clone começa a 
execução do script de controle do personagem: 


quando eu começar como um clone 


mude para a fantasia borboletão! + 


mostre 


vá para x: (211) y: número aleatório entre e [147) 


sempre 


adicione O ax 


fantasia número * = Laa então 





mude para a fantasia borboletão? » 


senão 


mude para a fantasia borboletáo1 * 


tocando em borda + ? então 


esconda 


apague este clone 


Figura 12.27: Controle do comportamento do borboletão. 


O comportamento do personagem é determinado pela estrutura de 
repetição, demonstrada na próxima figura. 


tocando em tiro + ? entáo 


mude para a fantasia borrao ¥ 


espere 05) seg 


apague este clone 


tocando em avião * ? então 
transmita tocou avião + 


mude para a fantasia borrao ¥ 


espere 05) seg 


apague este clone 


espere cD seg 


> 





Figura 12.28: Controle do comportamento do borboletão. 


Quanto um clone de borboletão é criado devemos apresentar o 
personagem na cena com sua primeira fantasia. Para isso a 
instrução mude para fantasia é utilizada, ajustando-se o traje para 
borboletão1 . Como o personagem estava oculto usamos a instrução 
mostre para que fique visível no jogo. 


A próxima etapa é o posicionamento do personagem na tela para 
que seja realizado o início de seu deslocamento. O borboletão, 
assim como o besouro, sempre parte da borda direita da cena em 
direção à esquerda, portanto, a coordenada x é fixa a cada criação 
de um novo clone, já a coordenada y é gerada de forma aleatória, a 
partir de um valor dado em um intervalo que representa a dimensão 
de altura do cenário. 


Como precisamos realizar alguns testes para avaliar vários aspectos 
durante o comportamento de deslocamento do personagem na 
cena, um laço de repetição é introduzido no script. No interior do 
laço de repetição inserimos a primeira instrução, cuja finalidade é 
realizar o incremento da coordenada x do personagem, fazendo-se 
o deslocamento em 5 pixels para esquerda. 


As próximas instruções são tomadas de decisão que devem ser 
realizadas pelo borboletão a cada iteração no interior da estrutura 
de repetição. O primeiro teste é implementado para altemarmos as 
fantasias do personagem, cada vez que ele voa em direção à outra 
extremidade, dando a impressão do bater de asas. Para isso, o 
teste verifica se o traje atual é O primeiro, correspondente à fantasia 
borboletão1 , Caso seja verdadeiro, então mudamos para a fantasia 
borboletáo2 , e vice-versa. 


Também devemos verificar se o personagem já extrapolou os limites 
do cenário, tentando sair em direção à borda esquerda. Neste caso, 
devemos tomar a providência de remover o clone atual do 
borboletão da cena. Isso vai ocorrer quando o personagem estiver 
tocando a borda. 


No próximo teste será verificado se o tiro atingiu o alvo, sendo assim 
temos que providenciar a morte do borboletão, cuja sequência de 
instruções começa com a mudança da fantasia do personagem para 
o borrão que representa a explosão, seguido do efeito sonoro 
associado ao efeito trágico, então são aguardados 5 décimos de 
segundo, para que o clone seja removido da cena. 


O último teste que devemos realizar é em relação à colisão do 
personagem com o avião, pois esta é a única forma de o inimigo 
causar algum tipo de dano ao jogador. Caso tenha tocado o avião, 
também será morte certa para o borboletão, mas ele tira alguma 
vantagem disso, pois reduzirá a energia do aviador. Uma fração de 
5 décimos de segundo faz com que o processamento do script seja 
retardado e o clone é removido da cena. Todas as instruções 
constantes no interior da estrutura de repetição voltarão a ser 
executadas após o atraso de 1 décimo de segundo no 
processamento do script. 


12.7 As cigarras errantes 


Além dos inimigos besouro e borboletão, temos outros oponentes 
ainda mais perigosos que são as cigarras errantes. Apesar do 
nome, este personagem tem uma ação bem mais nociva ao jogador, 
pois seu ataque, ao contrário dos demais inimigos, causa um dano 
maior. 


As cigarras errantes sempre realizam um movimento em direção ao 
seu alvo, que é o aviador, tentando atingir o avião para causar o 
maior dano possível. Se o jogador não tomar uma providência a 
tempo, atirando constantemente nessa fera, poderá perder energia, 
ou até mesmo perder o jogo. 


A seguir, vamos descrever as instruções envolvidas nos scripts do 
personagem, cujo primeiro código será o de criação de clones de 


cigarras errantes. Note que temos dois modelos de cigarras, uma 
que parte do topo da cena e outra que surge da base da cena. 
Ambas realizam o mesmo movimento em direção ao aviador, sendo 
a que parte do topo um pouco maior. Veja o código na figura. 


quando for clicado 


esconda 


sempre 


espere seg 


crie clone de este ator * 





Figura 12.29: Código de criação da cigarra errante. 


Quando o jogo iniciar o personagem é omitido da cena. Somente 
seus clones seráo apresentados ao jogador, mas para isso seráo 
criados a partir de uma estrutura de repeticáo que a cada 10 
segundos gera uma nova cópia desse inimigo. 


Após a criação do clone de cigarra errante, é disparado o evento 
quando eu começar como um clone , O qual vai controlar todo o 


comportamento de deslocamento da cigarra em direção ao seu alvo, 
veja o código inicial na figura. 


quando eu começar como um clone 


mude para a fantasia cigarrai + 


mostre 





Figura 12.30: Controle dos clones de cigarras errantes, código inicial. 


A próxima figura apresenta a continuação do código de controle de 
deslocamento da cigarra. 


sempre 







aponte para avião * 


mora (a) passos 
se fantasia nome "e = cigarral 


l 


mude para a fantasia cigalra? | 
| 






então 


sendo 


mude para a fantasia cigarai + 


tocando em avião 
transmita tocou avião w 


mude para a fantasia borrao "e 


espere 0.5) seg 


apague este clone 


tocando em tiro 


mude para a fantasia —borrao w 


espere (05) seg 


apague este clone 


-7 


Figura 12.31: Controle dos clones de cigarras errantes, continuação. 


A cigarra possui duas imagens associadas, que são intercaladas 
para representar o voo, portanto, ao iniciar o controle do 
comportamento de deslocamento a fantasia selecionada é a 
cigarral € O personagem é apresentado na cena de jogo. 


Depois dos ajustes iniciais, um controle de repetição é inserido no 
código para a execução do movimento do personagem e realização 
de vários testes, os quais são necessários ao longo do processo. A 
primeira ação realizada no interior da estrutura de repetição é o 
direcionamento da cigarra para a região da cena onde se encontra o 
aviador. Isso será sempre realizado para que a cigarra sempre 
aponte na direção de seu alvo durante seu voo, então o 
personagem anda 10 passos. 


As próximas instruções realizam a série de verificações inerentes ao 
comportamento da cigarra, a começar pelo teste para verificar qual 
fantasia está sendo apresentada no momento, cuja finalidade é 
realizar a troca da imagem a cada iteração no laço de repetição, 
visando simular o bater das asas do inseto. Caso a fantasia atual 
seja a cigarra1 será alterada para cigarra2 e vice-versa, enquanto o 
personagem estiver presente na cena. 


O próximo teste verifica se a cigarra conseguiu atingir o avião. Em 
caso afirmativo, devemos realizar algumas instruções em resposta a 
este evento, tais como: uma mensagem tocou avião é enviada para 
o ambiente de execução do jogo, pois será tratada em scripts de 
outro personagem; a fantasia do personagem deve ser alterada para 
borrão , que ilustra a explosão decorrente da colisão da cigarra com 
o avião; após, um efeito sonoro é emitido e 5 décimos de segundo 
são aguardados até que o personagem seja removido de cena. 


O último teste verifica se a cigarra foi abatida pelo tiro, o que 
também determina a troca da fantasia do inseto para O borrão de 
explosão, seguido da instrução que emite o efeito sonoro 
característico da morte da cigarra e 5 décimos de segundo são 


aguardados para que o clone do personagem seja removido da 
cena. 


Note que, diferente dos demais inimigos, a cigarra errante nunca 
chegará à borda, pois em sua trajetória poderão ocorrer somente 
dois eventos: o personagem pode ser atingido por um tiro do 
jogador, ou colidir com a aeronave, ambos os eventos causando a 
eliminação do clone da cigarra no jogo. 


Nesta seção foi apresentado somente o código de comportamento 
da primeira cigarra, a que parte da base da cena, pois o 
comportamento da segunda cigarra é idêntico, com a única 
diferença do intervalo de criação dos clones. 


12.8 O grande boss 


Enfim, chegamos ao nosso último e mais terrível inimigo, o grande 
boss. Esse personagem surge ao final do jogo, ocupando todo o 
espaço disponível na extremidade direita da cena. O grande boss é 
tão letal que costuma aniquilar até mesmo os demais inimigos, não 
sobrando besouro, borboletão ou cigarra para contar a história, 
entretanto alguns ainda podem escapar de sua ação nociva e voraz, 
continuando na cena em seu ataque ao aviador. 


O personagem realiza movimentos de descida e subida, sempre 
posicionado ao lado direito da cena, tomando mais difícil acertá-lo 
com os tiros do canhão, portanto não poupe munição durante o 
enfrentamento. Além disso, o grande boss ainda tem um trunfo que 
o toma mais perigoso que os inimigos anteriores — a gosma tóxica, 
que é uma substância arremessada pelo personagem contra o 
aviador e que causa danos à aeronave. Procure evitar ao máximo o 
contato com a gosma para não perder energia. A figura apresenta o 
script de criação do personagem. 


esconda 





cronômetro > 


Figura 12.32: Script de criação do grande boss. 


Ao iniciar o jogo, a imagem do personagem é omitida de cena, visto 
que só poderá ser visualizada próximo ao final. A instrução posterior 
realiza a inicialização do valor da variável dano boss, que começa 
zerada, pois o inimigo ainda não sofreu danos decorrentes dos tiros 
do jogador. 


Após os ajustes iniciais, é criado o laço de repetição sempre, o qual 
vai controlar o momento em que o personagem deverá surgir na 
cena de jogo para realização do seu ataque nocivo ao jogador. 
Neste caso, o teste apresentado no interior da estrutura é que 
determinará o momento exato do surgimento do personagem. A 
condição é que o tempo decorrido de jogo seja superior a 60 
segundos, o que é obtido a partir do valor constante no sensor 
cronômetro do ambiente de execução de Scratch. 


Quando passarem os 60 segundos de jogo, será transmitida a 
mensagem boss chegou e um som característico para impactar o 
momento é emitido, então o clone do personagem é criado e a 
execução do script é finalizada, pois não será mais útil. 


Depois que o clone for criado devemos tratar o evento quando eu 
começar como um clone, mas nesse caso serão dois scripts que vão 
tratar o mesmo evento: um será destinado para controlar os 
arremessos das gosmas tóxicas e o outro o comportamento de 
deslocamento do personagem. A figura apresenta o primeiro script. 


quando eu começar como um clone 


sempre 


espere (1) seg 


transmita atira gosma * 


toque o som gosma * 





Figura 12.33: Controle do arremesso de gosmas tóxicas. 


O controle de arremessos de gosmas tóxicas é realizado por um 
laço de repetição. A cada segundo decorrido será transmitida a 
mensagem atira gosma ao ambiente de execução do jogo e o som 
referente ao disparo é emitido. Como isso, o personagem estará 
sempre disparando gosmas em direção ao jogador, visando atin gi-lo 
de alguma forma. 


Em paralelo aos disparos de gosmas tóxicas, o personagem realiza 
seu movimento de subida e descida na cena, que o ajuda a 
esquivar-se dos tiros realizados pelo jogador. O script que controla 
os movimentos é apresentado na próxima figura. 


mude para a fantasia boss! = 





-10 


tocando em borda "e" 





mude para a fantasia borrao * 


0.001 


Figura 12.34: Controle dos movimentos do grande boss. 


O personagem parte das coordenadas apresentadas na instrução 

vá para , ajustando a posição horizontal em 165 pixels e a posição 
vertical em 133 pixels, seguido da instrução que ajusta a fantasia do 
personagem para boss1, então o grande boss é apresentado na 
cena. 


A variável y boss é utilizada para controlarmos o fator de 
deslocamento do personagem na área do cenário do jogo. Neste 
caso, o fator foi ajustado para o deslocamento a cada 10 pixels. 
Caso você deseje que o personagem seja mais rápido, é só 
aumentar o valor desse fator de deslocamento. Note, ainda, que o 
valor começa negativo porque será importante para uma técnica de 
mudança do sentido de movimentação do personagem, a qual será 
apresentada mais adiante. 


Como já vimos nos jogos personagens anteriores, todo controle do 
comportamento do ator passa por um laço de repetição sempre, eno 
comportamento do boss não seria diferente. A estrutura permite 
agrupar todas as ações necessárias as quais serão repetidas até 
que o personagem seja eliminado pelo jogador, ou o jogo chegue ao 
fim com a vitória de nosso vilão. 


O bloco de código inicia com a instrução que realizar o incremento 
da coordenada y do personagem, realizando seu movimento 
vertical. A cada passo de execução de um movimento devemos 
observar se o personagem tocou a borda do cenário, pois se isso 
ocorrer o sentido deve ser alterado, mudando-se a trajetória do 
boss. Para isso, usamos uma expressão de cálculo para atualizar o 
valor da variável y boss, multiplicando o valor atual por -1, assim, se 
o personagem estava realizando o movimento de descida passa a 
realizar o movimento contrário e vice-versa. 


A próxima etapa do processo é a verificação do estado de dano em 
que se encontra o personagem. Temos um limite a ser atingido, que 
neste caso é 5000, então quando este valor for superado, significa 


que o grande boss foi eliminado pelo jogador. Sendo assim, a 
fantasia é alterada para a imagem que representa a explosão e o 
efeito sonoro da morte do personagem é emitido, após 5 décimos de 
segundo a mensagem fim jogo é propagada e o clone é removido 
da cena. Todas as instruções constantes no bloco de repetição 
serão novamente executadas após o atraso de 1 milésimo de 
segundo no processamento do script. 


12.9 A gosma tóxica 


Esta é a arma letal do grande boss. Trata-se da forma de o inimigo 
se proteger e tentar atingir o jogador durante sua ação no jogo. 
Portanto, algumas ações também devem ser tomadas em relação 
ao controle do comportamento da gosma, as quais iniciam com o 
script apresentado na figura. 


for clicado 


escondda 


quando eu receber  atira_gosma + 


cre clone de este ator * 





Figura 12.35: Definição do clone de gosma tóxica. 


Note que, quando iniciar o jogo, a imagem do ator é ocultada e, 
quando a mensagem enviada pelo grande boss denominada 
atira gosma for recebida, um novo clone é gerado na cena. Em 
seguida, o evento quando em começar como um clone é disparado. 


VENECIA 165 EA “altura boss j E» 


mude x em 40) 


- tocando em borda ? 


tocando em avião * T 





0.001 


Figura 12.36: Controle da gosma tóxica. 


O script inicia com o posicionamento do personagem na cena, o que 
é realizado com a instrução vá para. À coordenada x é dada pelo 
valor constante 165, visto que o boss sempre será apresentado na 
margem direita do cenário, já a coordenada y possui um valor 
variável calculado a partir do valor da variável altura boss. A metade 
do valor da variável altura boss é utilizada para que possamos 
posicionar a gosma de forma centralizada em relação ao 
personagem grande boss, e em seguida a gosma é apresentada na 
cena. 


Dando continuidade ao código, surge nossa estrutura de controle de 
repetição, que vai permitir o deslocamento da gosma em direção à 
outra extremidade da cena. Para isso, o valor da coordenada x é 
decrementada em 10 pixels. O primeiro teste que surge na estrutura 
é para verificar se o personagem já encontrou a borda da cena, e 
caso isso ocorra devemos remover o clone do personagem. 


O script é encerrado com o último teste, o qual verifica se a gosma 
atingiu seu alvo, o avião. Caso tenha ocorrido esse evento, será 
transmitida a mensagem tocou avião ao ambiente de execução do 
jogo e o clone do personagem será apagado. 


Todas as instruções presentes na estrutura de repetição serão 
novamente executadas após um atraso de 1 milésimo de segundo 
no processamento do script, permitindo que a gosma cumpra seu 
roteiro. 


12.10 Final do jogo 


Quando o jogo chegar ao fim, o que ocorre se a energia do jogador 
for esgotada por ser atingindo por muitos inimigos, ou por gosmas 
tóxicas durante a batalha final com o grande boss, será apresentada 
uma imagem ao jogador, conforme podemos observar na figura. 





Figura 12.37: Imagem de fim de jogo. 


Os scripts utilizados para realização das ações executadas quando 
O jogo chegar ao fim são apresentados na figura seguinte. Como 
podemos observar, temos que ocultar o personagem no momento 
do início do jogo e, quando receber a mensagem fim jogo, tomar 
uma série de providências. 


quando for clicado quando eu receber fim jogo * 


esconda 


mostre 





toque o som fim ® até o fim 


pare todos ©% 





Figura 12.38: Script de final do jogo. 


A primeira instrução faz com que a imagem seja apresentada na 
cena e, em seguida, o efeito sonoro de finalização do jogo seja 
tocado, encerrando com a interrupção do processamento de todos 
os demais scripts que ainda estejam em execução. 


O jogo é encerrado e uma tela é apresentada ao jogador, indicando 
o término de sua missão. No próximo capítulo, veremos algumas 
extensões do ambiente de programação de Scratch, os quais 
apresentam recursos interessantes para construção de jogos e 
animações com a ferramenta. 


CAPÍTULO 13 
Apêndice - Extensões do ambiente 


Além dos recursos apresentados ao longo do texto para construção 
de projetos de animações e jogos, o ambiente de programação de 
Scratch oferece extensões às funcionalidades básicas, permitindo- 
nos ampliar as possibilidades interativas dos nossos projetos. 


Neste apêndice, vamos explorar algumas extensões, cujo acesso é 
realizado por meio do botão de extensões presente no ambiente de 
construção de projetos, conforme pode ser observado na figura. 


remova os efeitos sonoros 





mude volume em [40] 


Figura 13.1: Acesso às extensões do ambiente. 


Ao clicar nesse botão será apresentada ao usuário a página 
contendo os recursos adicionais que poderão ser utilizados. 





LEGO MINDSTORMS EV3 LEGO WeDo 2.0 
Construa robôs e outras coisas Crie com motores e sensores. 


interativas 
$ 
$ 


Figura 13.2: Página de extensões ao ambiente. 


As extensões atualmente disponíveis são: 


e música: um conjunto de novas instruções para que possamos 
elaborar músicas, combinando instrumentos distintos 
instrumentos musicais e compondo canções a partir de notas 
musicais e ritmos; 

caneta: recurso já presente em versões anteriores do ambiente 
de programação, mas que a partir da versão 3.0 passa a ser 
uma extensão. Este recurso permite criar projetos onde o 
personagem realiza riscos na cena durante sua trajetória, com 
uso de instruções de desenho; 

detecção de vídeo: também não é uma novidade, pois já 
estava presente em versões anteriores, é usada quando 
desejamos criar projetos que façam uso da captura de vídeo, o 
que pode ser útil para interação com a aplicação por meio de 
gestos; 

texto para fala: este é um novo e interessante recurso que foi 
adicionado ao ambiente na forma de extensão, o qual permite 
que os personagens falem. A extensão disponibiliza um 
conjunto de instruções para configuração do tom de voz e 
idioma; 


e traduzir: outro recurso muito interessante, pois permite que 
nossos projetos realizem a traducáo de textos para vários 
idiomas. Por exemplo, podemos escrever em portugués e o 
personagem pode falar em inglés; 

e makey makey: uma extensão que permite a integração do 
ambiente de programacáo de Scratch com a placa de sensor 
Makey Makey. Este tipo de placa permite que objetos sejam 
transformados em dispositivos de toque para que possamos 
interagir com nossas aplicações, o que gera muitas 
possibilidades para elaboração de projetos; 

e microbit: é outra extensão que permite a integração do 
ambiente de programação com a placa programável Micro:bit. 
Com ela, podemos elaborar projetos interativos onde o usuário 
pode realizar comunicação a partir de sensores extemos; 

e Lego Mindstorms: uma extensão para integração com a 
plataforma Lego Mindstorms EV3, que permite a elaboração de 
projetos para controle de robôs. A extensão apresenta um 
conjunto de instruções para obtenção de informações de 
sensores e controle dos motores. 


13.1 Tocando músicas 


A seguir, apresentaremos algumas extensões do ambiente e como 
explorar suas funcionalidades na criação de projetos em Scratch. A 
primeira extensão que vamos abordar é a de componentes para 
elaboração de músicas, que após ser selecionada abrirá uma nova 
paleta de componentes do ambiente de programação. Veja a figura. 
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ajuste ritmo para 
alterar ritmo por 20, 


Figura 13.3: Paleta de componentes para criação de músicas. 
Na paleta, temos as seguintes instruções: 


e toque instrumento: que usaremos para definir qual 
instrumento será utilizado no nosso projeto para tocar a música; 

e pausa por: define o tempo de pausa entre uma nota e outra; 

e toque a nota: instrução que define a nota a ser tocada e o 
tempo de execução. Ao clicarmos na nota aparece um teclado 
para facilitar a escolha, veja a figura: 


yà toque a nota por 025 | batidas 





Figura 13.4: Definição de uma nota. 


e mudar instrumento para: usaremos esta instrução quando 
desejarmos alterar o instrumento musical; 


e ajuste do ritmo para: podemos definir o ritmo da música. 


Para exemplificar a utilizacáo dos componentes de elaboracáo de 
músicas, veremos como criar o projeto Dó, ré, mi, fá que realiza a 
execucáo da cancáo infantil de mesmo nome. O projeto apresenta 
um teclado em um palco com o fundo de um teatro e a música é 
executada no momento que o botáo de início de execucáo é 
pressionado. O cenário do projeto é apresentado na figura. 


O código completo do projeto pó, ré, mi, fá pode ser obtido no 
seguinte endereço eletrônico: 


https://scratch.mit.edu/projects/439723792/ 





Figura 13.5: Cenário do projeto Do, ré, mi, fá. 


A seguir, veremos como fica a estrutura do script de execução do 
projeto, o qual deverá ser escrito no objeto teclado. A figura ilustra 
as instruções que são disparadas no momento em que o evento de 
clique no botão de execução do projeto é realizado. 


quando for clicado 


yd mudar instrumento para (1) Piano + 


transmita tocar música * 


Sempre 


espere (0.25 seg 


próxima fantasia 





Figura 13.6: Script de execução do projeto. 


Tudo começa com a definição do instrumento musical que será 
utilizado, que neste caso é o piano. A próxima instrução envia uma 
mensagem ao ambiente de execução do projeto, indicando que 
deve ser tocada a música. Na sequência de instruções, é criada 
uma estrutura de repetição, cuja finalidade é altemar a fantasia do 
teclado a cada fração de segundo. Veja que o tempo para troca de 
fantasia corresponde ao tempo de execução de cada nota. A 
próxima figura apresenta o script de execução da música. 


quando eu receber tocar música * 


Parte 1 


Parte 2 


Parte 3 


Parte 1 


pare todos * 





Figura 13.7: Execução da música. 


A execução da música inicia quando a mensagem tocar música é 
recebida, então são executadas as instruções, na ordem: Parte 1, 
Parte 2, Parte 3 €, novamente, Parte 1. Note que essas instruções 
foram criadas pelo programador e seus comportamentos podem ser 
observados na figura. 


toque a nota [60 ) por (0.25) 
toque a nota (62) por (0.25 ) 
toque a nota (64) e 0.25 
toque a nota (65) por (0.25 ) 
pausa por [0.25 ) batidas 
toque a nota (65) por [0.25 ) 
toque a nota (65) por [0.25 ) 
pausa por [0.25 ) batidas 


toque a nota [60 ) por (0.25) 
toque a nota (67) por 10.25) 
toque a nota (65) por 

toque a nota (64) por (0.25 ) 
pausa por [0.25 ) batidas 
toque a nota (64) por (0.25 ) 
toque a nota (64) por 10.25) 
pausa por [0.25 ) batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


toque a nota [60 ) por [0.25 ) 
toque a nota (62) por [0.25 ) 
toque a nota (60) por [0.25 ) 
toque a nota [ 62) por [0.25 ) 
pausa por [0.25 ) batidas 

toque a nota (62) por [0.25 ) 
toque a nota (62 ] por (0.25 ) 
pausa por [0.25 ) batidas 


batidas 


batidas 


batidas 


batidas 


batidas 


batidas 





Figura 13.8: Partes da música Dó, ré, mi, fá. 


As partes da música são muito semelhantes na sua estrutura, 
respeitando o tempo de execução das notas, bem como o 
agrupamento das mesmas, seguido dos intervalos necessários. O 
que muda de uma parte para outra são as notas utilizadas. 


Na primeira parte, é tocada a seguinte sequência de notas: dó, ré, 
mi e fá, seguido de uma pausa e finalizado por fá tocada duas 
vezes, e ao final da execução da primeira parte há mais uma pausa. 
Na segunda parte é outra sequência de notas, composta por: do, 

ré, do e ré, UMa pausa no processamento e finalizado por ré 
tocada mais duas vezes, e também há uma pausa no final da 
execução dessa parte. A terceira parte possui a sequência de notas: 
dó, sol, fá e mi, depois uma pausa e mi tocada por duas vezes, 
mais uma pausa no final. A música é finalizada com o toque da 
primeira parte novamente. 


13.2 Pintando no palco 


Outra extensão presente no ambiente de programação de Scratch é 
a que permite que riscos sejam traçados no palco, durante a 
movimentação dos personagens, o que possibilita a elaboração de 
desenhos delineando formas geométricas, tais como: quadrados, 
retângulos, triângulos etc. 


Em versões anteriores da linguagem, esta extensão fazia parte de 
uma paleta de componentes padrão do ambiente de programação, 
mas a partir da versão 3.0 passou a integrar um recurso adicional. 


Entre os componentes presentes na paleta de desenho temos: 


e apague tudo: um bloco de instrução que permite limpar todos 
os riscos realizados pelo personagem no palco; 


carimbe: permite a criação de cópias do personagem no palco. 
Se colocarmos no interior de uma estrutura de repetição e 
fizermos o deslocamento do personagem pelo palco podemos 
verificar o efeito de utilização desta instrução; 

use a caneta: quando utilizada, esta instrução faz com que o 
personagem pinte na tela do palco à medida que realiza algum 
movimento; 

levante a caneta: podemos utilizar esta instrução no momento 
em que não desejarmos mais que o personagem pinte no palco; 
mude a cor da caneta para: como o próprio nome diz, 
podemos definir uma nova cor para a caneta; 

adicione x ao valor da caneta: onde x corresponde ao valor 
fator de variação da cor, modificando o tom de cor da caneta; 
mude o parámetro cor da caneta para x: neste caso, a 
variação da cor é realizada diretamente para o fator indicado 
como parâmetro; 

adicione x ao tamanho da caneta: a espessura do risco da 
caneta sofre um acréscimo indicado pelo parâmetro x; 

mude o tamanho da caneta para x: o valor x determina qual 
espessura do risco realizado pela caneta. 


A seguir, veremos um exemplo prático para entendermos como 
nossos personagens podem utilizar os recursos de pintura para 
elaboração de formas no palco. Para isso, vamos apresentar o 
projeto do caranguejo pintor, o qual teima em desenhar quadrados 
no palco, um de cada cor. Veja a figura a qual apresenta a cena. 





Figura 13.9: Projeto caranguejo pintor. 


O projeto inicia com o posicionamento do personagem nas 
proximidades do centro do palco de onde vai partir para elaboração 
de seus desenhos. Para o controle das posições do caranguejo no 
palco foram criadas duas variáveis, x e y, que vão representar as 
coordenadas de tela, cujos valores vão variar à medida que cada 
quadrado for desenhado pelo personagem. Além disso, uma terceira 
variável auxiliar será utilizada, denominada passos , a qual será 
utilizada para o controle da distância percorrida pelo caranguejo 
durante a realização dos traços que compõem cada quadrado. 


A posição inicial do personagem é definida pelas variáveis x e y, 
que no momento em que o projeto é executado recebem o valor -10. 
O personagem é posicionado em um ângulo de 90 graus e a 
instrução apague tudo é usada para realizar uma limpeza prévia da 


área de desenho. Veja a figura, que apresenta a parte inicial do 
script relacionado ao comportamento do caranguejo. 


quando for clicado 











mude passos + 


mude y + 


vá parax x yi 


aponte para a direção 


q apague tudo 





Figura 13.10: Script do caranguejo desenhando no palco, blocos iniciais. 


A sequência de blocos de código implementa a estrutura de 
repetição, a qual faz com que o caranguejo pinte o palco, veja a 
figura. 


Cd 





Ed 


adicione passos  * 2) a passos 


adicione 





adicione 


adicione 


adicione 


Figura 13.11: Script do caranguejo desenhando no palco, blocos de repetição. 


Todo controle da movimentação do caranguejo para o desenho dos 
quadrados é realizado por dois blocos de repetição aninhados. O 
primeiro, o mais extemo, repete as instruções por 3 vezes, fazendo 
com que 3 quadrados sejam desenhados pelo caranguejo. 


Os desenhos são realizados pelas instruções presentes no interior 
da segunda estrutura de repetição, que faz com que sejam 
desenhadas 4 linhas a cada passo de execução, para que O 
quadrado seja apresentado no palco. Para isso, a primeira instrução 
presente é a use a caneta para que o personagem possa traçar a 
linha na tela à medida que o movimento é realizado, então o 
caranguejo é deslocado o número de passos indicado pela variável 
passos . Em seguida, o sentido de deslocamento do personagem é 
modificado para 90 graus, para que a próxima linha do quadrado 
seja traçada, fechando o laço de repetição com a instrução que 
realiza uma pausa de 5 décimos de segundo no processamento do 
script. 


A próxima instrução presente no primeiro laço de repetição instrui o 
caranguejo a erguer a caneta, pois precisa ser reposicionado no 
palco para traçar as linhas do próximo quadrado, assim, a cor da 
caneta é alterada para que seja desenhado um quadrado com cor 
diferente e o número de passos do caranguejo é aumentado, pois a 
próxima figura geométrica será maior. Também são acrescentadas 
as variáveis x e y, visto que o caranguejo será reposicionado mais 
abaixo na área que representa o palco. 


Para obtenção do projeto caranguejo pintor, acesse o site do autor 
no seguinte endereço: https://scratch.mit.edu/projects/439745405/ 


13.3 Personagens que falam 


A terceira extensão que veremos é a que permite a criação de 
projetos onde nossos personagens falam. Para isso, a extensão 
apresenta uma paleta de instruções onde podemos definir o idioma 
que será falado pelos atores do nosso projeto, as falas de cada ator 
e o tipo de voz. 


Para exemplificar como funcionam as instruções de fala, vamos 
elaborar o projeto do macaco falante, cujo cenário é apresentado na 
figura. O projeto constitui uma animação interativa, onde nosso 
personagem principal, o macaco falante, faz algumas falas e 
perguntas e, de acordo com a sua resposta, o macaquinho vai 
responder de forma diferente. 





Figura 13.12: Cenário do projeto macaco falante. 


Nesse projeto podemos verificar como tratar a emissão de fala em 
um determinado idioma selecionado pelo programador, além de 
definir o tom de voz do personagem, pois Scratch possibilita a 
escolha de tons de voz diferentes, os quais já estão predefinidos. 


O código completo do projeto pode ser obtido em: 
https://scratch.mit.edu/projects/439742816/ 


O código apresentado na figura mostra as acóes do macaco durante 
sua interação com o usuário, veja que o primeiro bloco de instrução 
utilizado foi para definição do idioma falado pelo personagem. Neste 
caso, foi utilizado nosso idioma, mas poderíamos selecionar em 
uma lista uma série de idiomas disponíveis no ambiente. 









sd defina o idioma como Portuguese (Brazilian) "e 


dl definir voz para rangido w 


Gual € o seu nome?” 


pergunte e e espere 


q falar jumte Lora ] com resposta 





o falar Eu tenho cinco anos! E você” 


pergunte qd. e espere 


Legal! Vamos brincar? 


você gosta de andar de bicicleta” 





Figura 13.13: Código das ações do macaco falante. 


A próxima instrução é para a definição do tipo de voz do macaco 
falante, pois o bloco permite a escolha de alguns tons de voz a partir 
de uma lista. O tom de voz padrão é O loud, mas como nosso 
personagem é infantil esse tom não fica muito bem, portanto, 
mudamos para o tipo de voz denominado rangido . Além dos tipos 
de voz mencionados, ainda temos os seguintes: tenor, gigante € 
gatinho . Esse último é o mais hilário, pois o personagem fala 
imitando um gato. 


Após a definição do tipo de voz, a instrução transmita é utilizada 
para o envio de uma mensagem ao ambiente, pois uma animação 
de troca de fantasia do personagem é realizada toda vez que 
alguma fala for realizada. 


Em seguida, o personagem realiza a primeira fala, interagindo com 
o usuário do programa, perguntando o nome. Note que a instrução 
pergunte é utilizada na sequência, mas sem nenhum texto a 
apresentar, pois agora não precisamos mais mostrar os balões de 
fala. Mas precisamos da variável de resposta, visto que vamos 
utilizá-la para compor a próxima fala do personagem, que será uma 
saudação. 


Depois, o personagem faz uma nova fala informando sua idade e 
pergunta qual a idade do usuário e, de acordo com a resposta, o 
macaco falante pode convidá-lo para brincar, ou fazer uma nova 
pergunta, como se você gosta de andar de bicicleta, finalizando a 
execução do programa. 


Como vimos, a cada vez que o macaco fala algo é enviada uma 
mensagem ao ambiente, denominada fale . Vejamos o que faz esse 
código, apresentado na figura. 


quando eu receber fale + 


repita O vezes 


próxima fantasia 


espere (05, seg 


=i 


mude para a fantasia monkey-c * 








Figura 13.14: Código de envio de mensagens ao ambiente. 


Então, sempre que a mensagem fale for recebida pelo script, uma 
estrutura vai repetir por 2 vezes as seguintes instruções: 
apresentação da próxima fantasia do macaco, que é a imagem com 
a boca aberta, simulando a fala, seguida de uma pausa de 5 
décimos de segundo, indo para a fantasia com a boca fechada 
novamente. Ao final, a figura inicial do macaco é apresentada na 
cena. 


13.4 Traduzindo textos 


O último recurso que veremos, o qual também é uma extensão do 
ambiente, será o módulo para tradução de textos. Este recurso 
apresenta uma paleta com somente dois blocos de instruções, que 
são: 


e traduzir para: faz a tradução do texto informado em um idioma 
selecionado a partir de uma lista; 

e idioma: permite verificar qual o idioma selecionado, em tempo 
de execução do projeto. 


A seguir, veremos o projeto do robô tradutor que apresenta nosso 
personagem que interage com você, solicitando algo para ser 
traduzido. Note que podemos selecionar o idioma da tradução a 
partir de botões presentes na cena. Basta selecionar o idioma 
desejado e escrever a sentença que deseja traduzir e, ao teclar 
enter , O robô fará a tradução, falando e mostrando em um balão a 
frase já traduzida. A figura apresenta a aparência do cenário do 
projeto. 


Olá, diga algo em 
Português. 


Espanhol 


£ Francês E 





Figura 13.15: Cenário do projeto robô tradutor. 


Ao executarmos o programa, serão realizadas as instruções do 
script apresentado na próxima figura, o qual inicia com a definição 
do idioma de tradução padrão. Neste caso usamos o inglês. Se 
nenhum botão for selecionado, o robô sempre vai traduzir as 
sentenças informadas para esse idioma. 


quando for clicado 


LE DAA English 


a defina o idioma como idioma 


sempre 


JALGA Olá, diga algo em Portugués. RES 


» 
e falar b traduzir resposta para idioma 


idioma = então 


» 
b traduzir CS por 2 sesuncos 





A English então 


» 
eb traduzir resposta para English v 2A 2 Em 


COn: aa French então 


» 
b traduzir resposta para French v por 2) segundos 


Figura 13.16: Código de interação do robô tradutor. 


A primeira instrução de tradução usada é a que define o idioma que 
será adotado. Para a definição do idioma vamos utilizar uma 
variável denominada idioma, cujo valor inicial é English. 


A próxima etapa do código é a que faz o controle de toda a dinâmica 
de interação do robô com o usuário. No interior do laço de repetição 
temos a primeira pergunta realizada pelo nosso personagem, 
realizando uma saudação e solicitando uma frase a ser traduzida. 
Após digitarmos a frase desejada e teclarmos enter, o conteúdo 
será armazenado na variável resposta, então o personagem vai falar 
a frase já traduzida para o idioma escolhido. 


Em seguida, iniciamos um conjunto de testes para verificarmos qual 
o idioma selecionado pelo usuário. Dessa forma, o balão contendo o 
texto traduzido será adequado ao idioma definido pelo usuário no 
momento em que clicou em um botão na cena. O balão será 
apresentado e ficará presente por 2 segundos na cena. 


Caso um determinado idioma tenha sido selecionado, a partir do 
clique em um botão presente no cenário, será executado o código 
para sua definição. Veja a figura que descreve como isso acontece. 


quando este ator for clicado 


defina Idioma + a 


Figura 13.17: Definição do idioma espanhol. 





Veja que há somente uma ação a ser tomada quando o usuário 
clicar em um botão de idioma, ou seja, devemos definir o conteúdo 


da variável idioma. Na ilustração foi apresentado como definir o 
idioma em resposta ao clique no botão Espanhol, mas o código é 
semelhante para os demais botões, mudando somente o conteúdo 
da variável. 


Para obter o código completo do projeto, acesse o seguinte 
endereço eletrônico: 


https://scratch.mit.edu/projects/439747151/ 


Sendo assim, chegamos ao fim de nossa divertida jomada, a partir 
dos desafios envolvidos na elaboração de jogos digitais. Espero que 
esta obra contribua com o aprendizado dos principios envolvidos na 
programação de computadores, mas, principalmente, na incrível arte 
de construção de animações, interações e aspectos inerentes aos 
jogos de computadores. 


CAPÍTULO 14 
Referências bibliográficas 


BADGER, M. Scratch 2.0: create digital stories, games, art and 
animations through six unique projects. 2th E dition. Birmingham: 
Packt Publishing, 2014. 


FORD, J. F. Scratch 2.0 Programming for Teens. Stamford: Cengage 
Leaming, 2014. 


JOSHI, A. Advanced Scratch Programming: leaming to design 
programs for challenging games, puzzles and animations. Tanuja 
Joshi, 2016. 


PUL, S. V.; Chiang, J. Scratch 2.0 Game Development. Birmingham: 
Packt Publishing, 2014. 


SWEIGART, A. Scratch Programming Playground: leam to program 
by making cool games. San Francisco: No Starch Press, 2016. 


